How can I programmatically select specific Ionic tab?

Ionic Framework Ionic Angular
1

How can I programmatically select specific Ionic tab (in typescript file)? For example if I have in template…

  • I’m using Ionic 8 and Angular 18
<ion-tabs>
  <ion-tab-bar slot="bottom" >
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon> Home
    </ion-tab-button>

    <ion-tab-button tab="favorites">
      <ion-icon name="heart"></ion-icon> Favorites
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

How can I programmatically select home tab?

I have tried with @ViewChild but without success:

@ViewChild('tabs', {static: true}) tabs:IonTabs | undefined;

and than

this.tabs?.select('home')

but it is not working. The error I get is…

TypeError: Cannot read properties of undefined (reading ‘getActiveStackId’)

2

The tabs normally just define the routing. Using the NavController and route to the path you want to should work :thinking:

3

i dont know if your method works, anyway you are missing the #identifier in your html code

for example:

<ion-tabs #myTabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon> Home
    </ion-tab-button>

    <ion-tab-button tab="favorites">
      <ion-icon name="heart"></ion-icon> Favorites
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

@ViewChild('myTabs', { static: false }) tabs: IonTabs;

 selectTab(tab: string) {
    this.tabs.select(tab);
  }

or this.selectTab('home') in your case
1 Like
4

This is working but the problem is I cannot use it because home tab is not selected (Ionic doesn’t add “tab-selected” class) if I have redirection. I will explain what I mean in this thread beacuse I finally found a solution - Ion-tab-button with blank "tab" attribute is not working (for homepage)? Any alternative to have homepage url mysite.com and not mysite.com/home? - #2 by joedoe123

5

This was just a typo.