Darshan Hiranandani : How Can I Select a Specific Tab Programmatically in Ionic?

Ionic Framework
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’)

Regards
Darshan Hiranandani

2

You wouldn’t want to “select” your home tab. You would want to programmatically navigate to it.

Something like:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  ...
})
export class LoginComponent {

  constructor(private router: Router) {}

  navigate() {
    this.router.navigate(['/tabs/home'])
  }
}
1 Like