Properties newIndex and oldIndex not working for SelectedIndexChangedEventData TabView

[vitaliy-kuzmich]

<TabView selectedIndex="1" selectedColor="#FF0000"   (selectedIndexChange)="tabChanged($event)" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle
         sdkToggleNavButton>
    <StackLayout  *tabItem="{title: 'tab.map' | translate}">
        <!--<GridLayout>
    <WebView src="~/home/map.html"></WebView>
</GridLayout>
-->
        <Label text="First tab item"></Label>
    </StackLayout>

    <StackLayout *tabItem="{title: 'tab.meeting.planner' | translate}">
        <Label text="Second tab item"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'tab.service.profile' | translate}">
        <Label text="Second tab item"></Label>
    </StackLayout>

</TabView>

  tabChanged($event: SelectedIndexChangedEventData) {
        console.log($event.newIndex);
//import {SelectedIndexChangedEventData} from 'ui/tab-view';
// $event.newIndex always undefined
    }

[NickIliev]

@vitaliy-kuzmich can confirm that newIndex and oldIndex properties are returning undefined.

As a workaround use directly the selectedIndex property of the TabView.
For example:

tabChanged(args) {
    let tabView = <TabView>args.object;
    console.log(tabView.selectedIndex);
}

[vitaliy-kuzmich]

@NickIliev mentioned code example works, thank you. There is another issue with tabs : [(ngModel)]="tabSelectedIndex" (from example) also does not works. it says
JS: ERROR Error: No value accessor for form control with unspecified name attribute JS: ERROR CONTEXT [object Object]
By the way how did you detect args.object data type ? Are there simple way to do that?

[NickIliev]

@vitaliy-kuzmich in order for two-way binding to work verify that you have imported NativeScriptFormsModule in the respective ngModule. (documentation article here)

import { NativeScriptFormsModule } from "nativescript-angular/forms"
@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptFormsModule, // RIGHT HERE
    ],
})

Regarding the args.object.is type .. well in our case we do not need to detect it as we already know this callback (tabChanged) is assigned to TabView. In fact, we can even emit the explicit typing. However, knowing that args object is of type TabView will ease your development and will grant your intellisense which is one of the main TypeScript advantages over pure JS.

By the way, I have just updated the mentioned example (using ngModel) for a better demonstration of the two-way binding (currently on PR here) and it works as expected on my side.

[vitaliy-kuzmich]

@NickIliev right, thanks!

[jamie-pate]

Also applies to <SegmentedBar>

value and oldValue do seem to work (on SegmentedBar at least), and you can use them to detect splurious events on initialization... ( reported as #1066 )

[medigeek]

any news on this? there's no point having SelectedIndexChangedEventData if the event doesn't pass any data

[edusperoni]

@medigeek This had me scratching my head for a while after your comment and it's popped up somewhere else:

NativeScript/docs-v8#31

due to how "NativeScript core" (xml) is wired, every time you change a property it emits the event propertyNameChange, so if you change selectedIndex it emits selectedIndexChange. SegmentedBar, TabView and others also emit selectedIndexChanged (notice the d) which has the correct values your expecting.

In the end all you need is to change (selectedIndexChange)="tabChanged($event)" to (selectedIndexChanged)="tabChanged($event)".