How to change Action bar for each Tab in Nativescript Angular

Question

I hav TabBar app using Nativescript Angular. I want to change the Action Bar buttons based on the selected tab. I just follow this tutorial https://www.youtube.com/watch?v=7go3L70QfIQ

But, don't know how to use TabView.selectedIndexChangedEvent in Angular. If anyone has done this, please share the piece of code.

Thanks

Answer 1

Use this example as a reference on how to use the selectedIndexChange event in Angular based application.

For example:

<TabView selectedIndex="0"  (selectedIndexChange)="onIndexChanged($event)">
<!-- more code follows here -->

And then in the component file use the onIndexChanged callback

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

Answer 2

I solve the issue using rxjs/Observable notifications. Logic is post a notification when the tab changes happen. Based on the tab index, I can decide the action bar button tap event methods.

    // send notify to child components
    let message = {
        "tabIndex" : this.tabIndex,
        "tappedButton" : "someButton"
    };
    this.notifyService.send(JSON.stringify(message));