change NativeScript TabView default behaviour

Question

I’m building a NS angular2 app and I encounter a problem with the default behavior of the TabView component. I don’t want it to pre-load all data when component is created. How can I prevent this behavior from happening. I only want to load data for a certain tab once the user clicks on it.

Here is my 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>

I am able to get onIndexChanged event invoked in the same .ts of tabview, however I HAVE to notify summary, dashboard, inner components.

Example of component that needs to be notified:

@Component({
selector: “summary”,
templateUrl: ‘summary.component.html’
})
export class SummaryView extends View {

constructor(args:Page){
   super();
}

}

It's almost like you'd have to detect which tab is currently viewing and then conditionally load each tab. if => tab2, then load the tab2 content. — razorsyntax, Apr 15 '18 at 17:02

score 1 · Answer 1 · answered Apr 20 '18 at 06:06

As he says, you can

@Component({
selector: “summary”,
templateUrl: ‘summary.component.html’
})
export class SummaryView extends View {
public tabSelectedIndex: number = n; ...}

and template

<TabView [(ngModel)]="tabSelectedIndex" ...> 
    <StackLayout *tabItem="{title: 'Summary', iconSource: 'res://ic_summary'}" >
        <summary *ngIf="tabSelectedIndex === n"></summary>
    </StackLayout>

change NativeScript TabView default behaviour

1 Answers1