Open second tab from the side menu

Ionic Framework ionic-v3
1

There are two tabs in my app. On the <ion-menu> there are links for both tabs. When I click on the Tab1 button the first tab is open and it’s OK.
But when I click on the Tab2 I need to show the tab2Page on the tabsPage, but if I try:

this.nav.setRoot(tabs2Page)

The page is shown without tabs.

How can I go to the second tab from the side menu?

app.html:

<ion-menu [content]="nav">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="onLoad(tabsPage)">
        <ion-icon name="book" item-left></ion-icon>
        Tab1
      </button>
      <button ion-item (click)="onLoad(tab2)">
        <ion-icon name="list-box" item-left></ion-icon>
        Tab2
      </button>
      <button ion-item (click)="onLoad(settingsPage)">
        <ion-icon name="settings" item-left></ion-icon>
        Configurações
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

app.component.ts:

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  tabsPage = TabsPage;
  tab2 = Tab2Page;
  settingsPage = SettingsPage;

  //...

 onLoad(page: any) {
    this.nav.setRoot(page);
    this.menuCtrl.close();
  }
}

tabs.html

<ion-tabs tabsPlacement="top" #appTabs>
  <ion-tab [root]="tab1page" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab2Page" tabIcon="list-box"></ion-tab>
</ion-tabs>
2

Hi @vcarvalho0402,
Instead Of setRoot() try Select Option of Tabs, i.e
this.navCtrl.parent.select(TabIndex);
where TabIndex is an Index of a tab that you want to be selected, For ex, If you have 2 tabs like Tab1, Tab2 and if you want to select Tab2 from your side menu then you can write something like this,
this.navCtrl.parent.select(1);

1 Like
3

Thanks @vnkyksj,
when going through the link on the menu the parent at this.navCtrl.parent is null.

But with your answer I got it working using navParams:

On the click envent of my menu I send the tabIndex:
this.nav.setRoot(this.tabsPage, {tabIndex: 1});

On the tabsPage:

  ...
  public tabIndex: Number = 0;

  constructor(public params: NavParams) {
    let tabIndex = this.params.get('tabIndex');
    if (tabIndex) {
      this.tabIndex = tabIndex;
    }
  }

And my tabs.html:

<ion-tabs [selectedIndex]='tabIndex' tabsPlacement="top" #tabs>
  <ion-tab [root]="tab1Page" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab2Page" tabIcon="list-box"></ion-tab>
</ion-tabs>

Thank you for your help

1 Like