nativescript angular tabview fails to display on iOS

Question

I have a simple angular nativescript application. The initial (only) page contains a simple tabview with two tabs. Each tab contains a single label.

When the app launches the tabs are shown, but the label on the initial tab isn't displayed. When I tab to the second tab, its label displays, when I tab back to the first, its label now displays.

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

@Component({
  selector: "my-tabview",
  template: `
  <TabView #tabview>
    <StackLayout *tabItem="{title: 'Tab1'}">
        <Label text="This is Label in Tab 1x"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab2'}">
        <Label text="This is Label in Tab 2x"></Label>
    </StackLayout>
  </TabView>
`,
})

export class TabViewComponent {
}

I'd appreciate any feedback on what I'm missing.

Thanks Colin

Fixed

Although the display shows both tabs, and the tab text colors indicate that the first tab has been selected, when I look at the selectedIndex property in ngAfterViewInit the value is undefined.

If I set it to zero in ngAfterViewInit, then the initial tab's contents are shown.

Is this a bug? Should I initially select a tab programmatically like this or is there an html attribute that I could use?

Thanks

Colin

Nikolay Tsonev Nikolay Tsonev · Accepted Answer · 2016-06-28T08:20:09

I think this is normal behavior for NativeScript Angular projects, while using TabView. In regard to that you could setup selectedIndex TabView property from the html. You could review the code below.

<TabView selectedIndex="0">
    <StackLayout *tabItem="{title: 'Tab1'}">
        <Label text="This is Label in Tab 1x"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab2'}" >
        <Label text="This is Label in Tab 2x"></Label>
    </StackLayout>
 </TabView>

nativescript angular tabview fails to display on iOS

1 Answers