Run function when tab is selected - Angular2+NativeScript

Question

I am familiar with Angular, but I'm just starting out learning NativeScript. I have a Tab interface using the Tab Template from the NativeScript library. I want to run a function when my tab is selected but am having trouble figuring it out.

Here is the app.component.html:

<TabView [(ngModel)]="tabSelectedIndex" androidTabsPosition="bottom" (selectedIndexChanged)="onSelectedIndexChanged($event)">
    <page-router-outlet *tabItem="{title: 'Home', iconSource: getIconSource('home')}" name="homeTab">
    </page-router-outlet>

    <page-router-outlet *tabItem="{title: 'Away', iconSource: getIconSource('browse')}" name="awayTab">
    </page-router-outlet>

    <page-router-outlet *tabItem="{title: 'Matchup', iconSource: getIconSource('search')}" name="matchupTab">
    </page-router-outlet>
</TabView>

I don't really have anything inside the matchup.component.ts just yet because I haven't been able to figure this out yet. Here it is though:

import { Component, OnInit } from "@angular/core";
import { DataService } from "../core/data.service";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "Matchup",
    moduleId: module.id,
    templateUrl: "./matchup.component.html"
})
export class MatchupComponent implements OnInit {

    constructor(
        private data: DataService,
        private route: ActivatedRoute
    ) { }

    homeTeam: any;
    awayTeam: any;
    isVisible = false;


    ngOnInit(): void {
    }

    getTeams() {
        this.homeTeam = this.data.getHomeTeam();
        this.awayTeam = this.data.getAwayTeam();
    }
}

I'd like to be able to call getTeams() when the tab is selected.

Answer 1

There are few options you could use here,

1. Inject Router in each component and subscribe to changes, execute your function when route matches for the component.
2. Declare a BehaviorSubject inside a service which you can inject to any component. On onSelectedIndexChanged update the selected index into that BehaviorSubject . The child components may subscribe to this BehaviorSubject and call appropriate function if the given index matches.
3. ngrx can make this even more simpler.
4. You may even inject the AppComponent / TabView into child components constructor and listen to index changes in each component level.
5. You may use the Injector to get instance of the component on onSelectedIndexChanged event.

Answer 2

I believe that TabView only keeps the active tab around. This means that each time you select a new tab, that tab's ngAfterViewInit will be called.

export class MatchupComponent implements AfterViewInit {
  ngAfterViewInit() {
    this.homeTeam = this.data.getHomeTeam();
    this.awayTeam = this.data.getAwayTeam();
  }
}

However, depending on your data model, it may be more beneficial to link directly to the service.

export class MatchupComponent {
  get homeTeam(): Team {
    return this.data.getHomeTeam();
  }
  get awayTeam(): Team {
    return this.data.getAwayTeam();
  }
}

Answer 3

Would using the onSelectedIndexChanged in your app.component like this work?

onSelectedIndexChanged(args: SelectedIndexChangedEventData) {

    if (args.newIndex == 0)
        this.homeComponent.init();
    else if (args.newIndex == 1)
        this.awayComponent.init();
    else if (args.newIndex == 2)
        this.matchUpComponent.init();
}