Nativescript page title not rendering when set after navigation

Question

I'm building an app and I have a problem with rendering the title in the ActionBar after navigating to that page. Since the ActionBar cannot have an id I'm using an observable viewModel in which I set the title property.

-----xml-----
    <Page.actionBar>
        <ActionBar title="{{ name }}">
        </ActionBar>
    </Page.actionBar>
-------------
------js-----

  exports.pageLoaded = function(args) {
    page = args.object;
    
    var navData = page.navigationContext;
    viewModel.set("name",navData.name);
    
    page.bindingContext = viewModel;
};

What I have seen so far debugging this problem is that when I close the phone screen and after that open it (refreshing the app) the action bar title will render.

Found the answer (a workaround),

 <ActionBar> 
        <ActionItem ios.systemIcon="12" android.systemIcon="ic_menu_search" tap="showSearch" /> 
    <ActionItem android.systemIcon="ic_menu_moreoverflow" tap="logout" text="Logout" android.position="popup" /> 
    <ActionBar.titleView> 
           <StackLayout orientation="horizontal"> 
           <Label text="{{ name }}" /> 
           <Image src="res://app_icon" /> 
           </StackLayout> 
    </ActionBar.titleView> 

Answer 1

You need to set the title in a different page event, fairly certain you should do this in the navigatedTo event for the page.

For more info on the page navigation events, check out this blog post Nathanael Anderson - FluentReports - page navigating order of events