NativeScript-Angular Tabview Custom View inside Tabs

Question

I am trying to Implement NativeScript-Angular Tabview, I am able to create the Tabs with labels and Images. I have seen examples for Nativescript using component for .xml files.

Is there any approach for Angular-NativeScript Projects.

Answer 1

The official doc provides it.

https://docs.nativescript.org/angular/cookbook/tab-view-ng

See an example below:

The table-view-test.ts file is your TypeScript component:

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

export class DataItem {
    constructor(public itemDesc: string) {}
}

@Component({
    selector: "tab-view-test",
    templateUrl: "tab-view-test.html"
})
export class TabViewTest {
    public items: Array<DataItem>;

    constructor() {
        this.items = new Array<DataItem>();
        for (let i = 0; i < 5; i++) {
            this.items.push(new DataItem("item " + i));
        }
    }
}

The tab-view-test.html file is your HTML template:

<TabView selectedIndex="1" selectedColor="#FF0000">
    <StackLayout *tabItem="{title: 'Tab 01'}">
       <Label text="Primary tab item"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab 02'}">
       <Label text="Second tab item"></Label>
    </StackLayout>
</TabView>

I hope this helps!