How to change an action bar title text when moving from one tab to another tabs in nativescript

Question

• When loading this mainactivity page for the first time, it is loading the third tab page action bar text.

• I need to load the action bar text based on clicking the tab.

• For Eg: When I click the second tab means second tab action bar have to get trigger.

main.activity.html:

<ActionBar title="MainActivity" class="action-bar">

</ActionBar>


<TabView selectedIndex="0" (selectedIndexChange)="onIndexChanged($event)"  iosIconRenderingMode="alwaysTemplate" selectedTabTextColor="blue" sdkExampleTitle sdkToggleNavButton>
<TabView iosIconRenderingMode="alwaysOriginal"></TabView>

<StackLayout *tabItem="{title: 'First Tab',iconSource:'res://store'}" >
<first-page></first-page>
</StackLayout>

<StackLayout *tabItem="{title: 'Second Tab',iconSource:'res://myapps'}" >
<second-page></second-page>
</StackLayout>

<StackLayout *tabItem="{title: 'Third Tab',iconSource:'res://home'}" >
<third-page></third-page>
</StackLayout>

</TabView>

main.activity.ts:

public onIndexChanged(args) {
        let tabView = <TabView>args.object;
        console.log("Selected index changed! New inxed: " + tabView.selectedIndex);
    }

Answer 1

For every tab position, we need to add the tabindex and add the title for appropriate page.

   <ActionBar *ngIf="tabIndex == 1" title="My Apps" color="black"> </ActionBar>