Nativescript-angular: TabView change selectedIndex in code can not change tab accordingly in Android

[liuwei108]

I followed
https://docs.nativescript.org/angular/ui/ng-ui-widgets/tab-view#binding-tab-view-items
to create TabView in which selectedIndex property is two-way binding

HTML code

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'Profile', iconSource: 'res://icon'}">
        <StackLayout>
            <Label [text]="'Profile Tab (tabSelectedIndex = '+ tabSelectedIndex +')'" class="h2 m-t-16 text-center" textWrap="true"></Label>
            <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
        </StackLayout>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Stats'}">
        <StackLayout>
            <Label [text]="'Stats Tab (tabSelectedIndex = '+ tabSelectedIndex +')'" class="h2 m-t-16 text-center" textWrap="true"></Label>
            <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
        </StackLayout>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Settings'}">
        <StackLayout>
            <Label [text]="'Settings Tab (tabSelectedIndex = '+ tabSelectedIndex +')'" class="h2 m-t-16 text-center" textWrap="true"></Label>
            <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
        </StackLayout>
    </StackLayout>
</TabView>

TypeScript

public tabSelectedIndex: number;

constructor() {
    this.tabSelectedIndex = 1;
}

changeTab() {
    if (this.tabSelectedIndex === 0) {
        this.tabSelectedIndex = 1;
    } else if (this.tabSelectedIndex === 1) {
        this.tabSelectedIndex = 2;
    } else if (this.tabSelectedIndex === 2) {
        this.tabSelectedIndex = 0;
    }
}

This code only works for iOS, if I tested in Android, when I click "Change Tab via ngModel" button, only the tabSelectedIndex = n , the numbers changes, but the content, the tab keeps in the index 0 (profile Tab).

I use the latest tns version 4.1.2 and nativescript-angular": "6.0.9", I also tried 6.0.0 version, same behavior

[liuwei108]

Workaround:
change
[(ngModel)]="tabSelectedIndex"
to
[selectedIndex]="tabSelectedIndex" (selectedIndexChange)="tabSelectedIndex"

[tsonevn]

HI @liuwei108,
I tested the sample project on my side, however, I was unable to recreate the issue. For your convenience, I am attaching GIF file.

It will help if you send us sample project, which can be used for debugging.

[liuwei108]

Figured out, forgot to import NativeScriptFormsModule ...
thanks for prompt reply! you may close this issue.

David