Fire Nativescript (Angular) tabitem event when tabitem gets selected


#1

I am using a Nativescript (Angular 2) TabView with two TabItems. The XML is divided intro three files. One that holds the TabView and two others for each TabItem. Therefore I also have three TypeScript components.

At the moment I am loading data in the second TabItem’s onInit method. The problem is that this action already happens when the first TabItem of the TabView is being displayed/loaded. What is the best practice to load this data only when the second TabItem is selected?

This is my (shortened) code:

home.page.html:

<ActionBar title="Home"></ActionBar>
    <TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)" toggleNavButton>

    <StackLayout *tabItem="{title: 'Tab 1'}">
        <tab1></tab1>
    </StackLayout>

    <StackLayout *tabItem="{title: 'Tab 2'}">
        <tab2></tab2>
    </StackLayout>
</TabView>

home.page.ts:

import {Component} from "@angular/core";

@Component({
    selector: "home-page",
    templateUrl: "./pages/home/home.page.html",
    providers: []
})

export class HomePage {

    public activeTab: string;

    public constructor() {

    }

    public tabIndexChanged(e: any) {

        switch (e.newIndex) {
            case 0:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;
            case 1:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;
            default:
                break;
        }
    }

}

tab1.tab.html:

<StackLayout orientation="vertical" class="p-20">
    <Label text="Tab 1"></Label>
</StackLayout>

tab1.tab.ts:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "tab1",
    templateUrl: "./pages/partials/tab1.tab.html",
    providers: []
})
export class Tab1 implements OnInit {

    public constructor() {}

    public ngOnInit() {
        console.log("init Tab 1");
    }

}

tab2.tab.html:

<StackLayout orientation="vertical" class="p-20">
    <Label text="Tab 2"></Label>
</StackLayout>

tab2.tab.ts:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "tab2",
    templateUrl: "./pages/partials/tab2.tab.html",
    providers: []
})
export class Tab2 implements OnInit {

    public constructor() {}

    public ngOnInit() {
        console.log("init Tab 2");

        this.getSomeDataViaHttp();
    }

    private getSomeDataViaHttp() {
        //getting data from an API 
    }

}

Is there an Angular 2 / Nativescript event other than onInit that would help here? Or should I use the method tabIndexChanged in the home.page.ts for that? Or put all the logic and the XML for the TabView back into one xml file and one ts file? What is best practice?


#2

Take a look at the following Nativescriptsnack: http://www.nativescriptsnacks.com/snippets/2016/08/02/get-active-tab-index.html


#3

Thank you for your answer.

But I guess my case is different.
In Tab 2 I am loading remote data with http and this data is already being loaded when Tab 1 is being displayed.
Furthermore as opposed to the Nativescript snack you mentioned I have divided up the tabitems into two views and two components.
So if I use the tabIndexChanged method in the parent component how could I access a method in the child components (views) from there (if that is best practice)?


#4

I think you’d have to use Angular’s inputs and outputs to communicate the the change down to your child components. Here’s a pretty good Youtube video on using them: https://www.youtube.com/watch?v=bn0TnMvBBVM


#5

@Tom Did you found any solution for this. I’m a newbie to {N}, and I’m working on a very complex app and now I’m facing the same problem. I have totally 5 Tabs in action. Where all tabs uses HTTP module to get the dynamic data’s. All TAB data’s loads when the parent Component (Home) starts.

How to fix this. My aim is to load the TAB ITEM only on demand not on the start of Home Component.

(i.e)…, Load the Tab Item only when the particular tab got selected.

@jen.looper Pls help me to sort out the issue.


#6

@SundarGsv @SP1966 @jen.looper
What solution did you use so that all the tabs will not load when starting the application, even I am using the http module and it is loaded in all. What did you use or how did you fix this problem?


#7

Setting androidTabsPosition to bottom should prevent preloading tabs before they are visited. Or you can simply listen to selectedIndexChanged event and use the index to identify which tab’s data you have to load.