I am currently developing an NS angular2 application and I have run into an issue with the default behavior of the TabView component. I do not want it to preload all data upon creation of the component. Instead, I only want the data for a specific tab to load once the user clicks on it.
Below is my implementation of TabView:
<TabView #tabview (selectedIndexChange)="onIndexChanged($event)" class="tab-view" sdkToggleNavButton>
<StackLayout *tabItem="{title: 'Summary', iconSource: 'res://ic_summary'}" >
<summary></summary>
</StackLayout>
<StackLayout *tabItem="{title: 'Dash', iconSource: 'res://ic_dashboard'}">
<dashboard></dashboard>
</StackLayout>
<StackLayout *tabItem="{title: 'My players', iconSource: 'res://ic_players'}" >
<myplayers></myplayers>
</StackLayout>
<StackLayout *tabItem="{title: 'Details', iconSource: 'res://ic_details'}" >
<playerdetails></playerdetails>
</StackLayout>
</TabView>
The onIndexChanged event is successfully triggered in the same .ts file as the tabview, but I need to notify the summary, dashboard, and other inner components.
Here is an example of a component that needs to be notified:
@Component({
selector: “summary”,
templateUrl: ‘summary.component.html’
})
export class SummaryView extends View {
constructor(args:Page){
super();
}
}