Call my own init function on tabview change


#1

Guys

This maybe nore of a angular/typescript question but i have a nativescipt app and I use a tabview

the ngInit function is called but i want to also call another function within the typescript code when the tab is selected

anyone got any examples?


#2

Is there any issue with calling said function inside the ngInit?


#3

issue with that is that the nginit seems to get called immediately on every tab when we render the whole tabview

I only want to call a ‘load’ method when I select the tab


#4

This may help: http://www.nativescriptsnacks.com/snippets/2016/08/02/get-active-tab-index.html


#5

I’m having the same problem.

The selectedIndexChanged event fires correctly in the tabs.component but I want to call a method inside the selected tab component.

I’m looking at the Angular Tab Navigation Template, is there a way of firing an event inside the tab components? i.e. Home, Browse and Search.


#6

You want to use ViewChild to access the tab components:

In TabsComponent:

@ViewChild(HomeComponent) homeComponent: HomeComponent;
@ViewChild(BrowseComponent) browseComponent: BrowseComponent;
@ViewChild(SearchComponent) searchComponent: SearchComponent;

onSelectedIndexChanged(args: SelectedIndexChangedEventData) {

const tabView = <TabView>args.object;
    
if (args.newIndex == 0)
	this.homeComponent.init();
else if (args.newIndex == 1)
	this.browseComponent.init();
else if (args.newIndex == 2)
	this.searchComponent.init();

}