CODEWITHSUNDEEP
angulartypescriptionic2ionic3
Jayendra Gothi
Jayendra Gothi

Reputation: 712

ionic2 tabs getSelected Method gives previous selection

following is the code i am working on 

onTabsChange(abc) {
   let selected_tab = this.tabs.getSelected();
   let tab_index = selected_tab.index;
   console.log(tab_index);  // should print current tab index but it prints previously selected tab index
}

And Following is the Html code

 <ion-tabs #myTabs class="menu" (ionChange)="onTabsChange()" selectedIndex="0">
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
 </ion-tabs>

Now if i click on any tab, the this.tabs.getSelected() gives me the previously selected tab..

if i want the current selected tab how can i achieve this..

Upvotes: 4

Views: 2497

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Now if i click on any tab, the this.tabs.getSelected() gives me the previously selected tab..

The getSelected() method returns the selected tab and not the previously selected tab. The thing is that the index is a zero based index so the first tab has 0 as index, the second one has 1, and so on...

<ion-tabs #myTabs (ionChange)="onTabsChange()" selectedIndex="0">
  <ion-tab [root]="tab1Root" tabTitle="TabTitle1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tabTitle2"></ion-tab>
</ion-tabs>

And then in your code:

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root: any = Page1;
  tab2Root: any = Page2;

  public onTabsChange() {
    let selectedTab = this.tabRef.getSelected();
    console.log(selectedTab.index + ' - ' + selectedTab.tabTitle);
  }
}

Upvotes: 6

Related Questions