Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tab [selectedIndex] with assigned variable has no effect

See original GitHub issue

Ionic version: (check one with “x”) [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request

Current behavior:

When using selectedIndex as described in the documentation with an assigned variable, the tabs do not change. For example, with a variable named index:

<ion-tabs [selectedIndex]="index" #mainTabs>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="list"></ion-tab>
</ion-tabs>

…when the index variable changes from 0 to 1, the tabs are not updated.

Expected behavior:

The second tab should be selected.

Steps to reproduce: I’ve created an example repository using the Tabs template, using an observable for the index variable that selectedIndex is set to:

https://github.com/christopherstyles/ionic-tab-selected-index-example

When the app first starts (on the 1st tab, the Home screen), click on the FAB, then on “New Post”. The action on the button updates the index variable, which should in turn update the tabs. You can see that the index is set correctly because it is echoed out into a <ion-item>index: {{index}}</ion-item> element in the tabs view.

Other information:

N/A

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.1.1
    Ionic Framework                 : ionic-angular 3.4.1

System:

    Node       : v6.9.2
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.8.2
    ios-sim    : 5.0.3
    npm        : 3.10.9