Nativescript Angular Tabview Binding

Question

I am using nativescript with angular2 and a tabview. The tabview is working well so far and i can also get and set the tabIndex while clicking or swiping between the tabItems.

My problem now is, that if the event "onSelectedIndexChanged" is triggered, i am not able to set a header title with databinding. It throws the error "ExpressionChangedAfterItHasBeenCheckedError".

Here is the component content:

import { Component, OnInit, EventEmitter, Output } from "@angular/core";
import { ConfigService } from "../../services/config.service";
import { CustomerService } from "../../services/customer.service";
import { UserService } from "../../services/user.service";

@Component({
     selector: "app-header",
     templateUrl: "./components/shared/header.component.html",
     styleUrls: ["./components/shared/header.component.css"]
})

export class HeaderComponent implements OnInit {
    @Output() openMenuEmmiter = new EventEmitter<boolean>();
    customer_image: string;
    isAuthenticated: boolean = false;
    tabSelectedIndex: number;
    menuPointTitle: string;

    constructor (private _configService: ConfigService, private _customerService: CustomerService, private _userService: UserService) {

    }

    ngOnInit() {
         this.tabSelectedIndex = 0;
         this.menuPointTitle = "Home";

         this._userService.getIsAuthenticated().subscribe(
             (state) => {this.isAuthenticated = state;}
         );

         this._customerService.getCurrentCustomer().subscribe(
             (customer) => {this.customer_image = customer.image;}
         );

     }

     onOpenMenu () {
         this.openMenuEmmiter.emit(true);
     }

     onSelectedIndexChanged() {
         this.menuPointTitle = this.tabSelectedIndex+"test";
         console.log(this.tabSelectedIndex);
     }
 }

The HTML Code is the following:

<StackLayout class="accent">
    <FlexboxLayout flexDirection="column">
        <FlexboxLayout>

            <Label flexGrow="1" [text]="menuPointTitle" style="font-size: 18; font-weight: bold;"></Label>
            <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-notifications' | fonticon" style="font-size: 24"></Label>
            <Label  [nsRouterLink]="['/login']" width="30"  class="mdi" [text]="'mdi-more-vert' | fonticon" style="font-size: 24"></Label>
        </FlexboxLayout>
    </FlexboxLayout>
</StackLayout>


<TabView [(ngModel)]="tabSelectedIndex"  [selectedIndexChanged]="onSelectedIndexChanged()" tabsBackgroundColor="#97201A" selectedTabTextColor="#FFFFFF" tabTextColor="#DB645E" selectedColor="#FFFFFF" class="fa" style="margin: 0; font-size: 20;">
    <StackLayout *tabItem="{title: '&#xf015;'}" style="font-size: 20">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-home' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf1ea;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-message' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf07b;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-folder' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf005;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf059;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
    </StackLayout>
</TabView>

Thanks for your help to solve this issue.

Answer 1

The problem is, that it seems to call the "onSelectedIndexChanged" already before the "ngOnInit" and also many times. So I made the binding wrong, but there is a easy way out.

1. Change the method call to (selectedIndexChanged)="onSelectedIndexChanged($event)" to get the arguments of the event.

   <StackLayout class="accent">
       <FlexboxLayout flexDirection="column">
       <FlexboxLayout>
           <Label flexGrow="1" [text]="menuPointTitle" style="font-size: 18; font-weight: bold;"></Label>
           <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-notifications' | fonticon" style="font-size: 24"></Label>
           <Label  [nsRouterLink]="['/login']" width="30"  class="mdi" [text]="'mdi-more-vert' | fonticon" style="font-size: 24"></Label>
       </FlexboxLayout>
       </FlexboxLayout>
   </StackLayout>
   
   
   <TabView [(ngModel)]="tabSelectedIndex"  (selectedIndexChanged)="onSelectedIndexChanged($event)" tabsBackgroundColor="#97201A" selectedTabTextColor="#FFFFFF" tabTextColor="#DB645E" selectedColor="#FFFFFF" class="fa" style="margin: 0; font-size: 20;">
       <StackLayout *tabItem="{title: '&#xf015;'}" style="font-size: 20">
       <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-home' | fonticon"></Label>
       </StackLayout>
       <StackLayout *tabItem="{title: '&#xf1ea;'}">
       <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-message' | fonticon"></Label>
       </StackLayout>
       <StackLayout *tabItem="{title: '&#xf07b;'}">
       <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-folder' | fonticon"></Label>
       </StackLayout>
       <StackLayout *tabItem="{title: '&#xf005;'}">
       <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
       </StackLayout>
       <StackLayout *tabItem="{title: '&#xf059;'}">
       <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
       </StackLayout>
   </TabView>
   

2. Change the method inside the component to only run, if the value has changed.

   import { Component, OnInit, EventEmitter, Output } from "@angular/core";
   import { ConfigService } from "../../services/config.service";
   import { CustomerService } from "../../services/customer.service";
   import { UserService } from "../../services/user.service";
   
   @Component({
        selector: "app-header",
        templateUrl: "./components/shared/header.component.html",
        styleUrls: ["./components/shared/header.component.css"]
   })
   
   export class HeaderComponent implements OnInit {
       @Output() openMenuEmmiter = new EventEmitter<boolean>();
       customer_image: string;
       isAuthenticated: boolean = false;
       tabSelectedIndex: number;
       menuPointTitle: string;
   
       constructor (private _configService: ConfigService, private _customerService: CustomerService, private _userService: UserService) {
   
       }
   
       ngOnInit() {
        this.tabSelectedIndex = 0;
        this.menuPointTitle = "Home";
   
        this._userService.getIsAuthenticated().subscribe(
            (state) => {this.isAuthenticated = state;}
        );
   
        this._customerService.getCurrentCustomer().subscribe(
            (customer) => {this.customer_image = customer.image;}
        );
   
        }
   
        onOpenMenu () {
        this.openMenuEmmiter.emit(true);
        }
   
       onSelectedIndexChanged(args) {
       if (args.newIndex != args.oldIndex) {
           console.log(args.newIndex);
           this.menuPointTitle = "test"+args.newIndex;
       }
       }
    }