Change Tab from app.component

Ionic Framework ionic-v3
1

Hi,

How can I change the tab from the app component. I would like to change the tabs and after “push” a page when a new notification is received (for example).

@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})

export class MyApp {
rootPage = TabsPage;

@ViewChild(Nav) nav;

constructor(){  }

test(): void {
    //Change Tab
}

}

Tabs Page

@Component({
    template: '<ion-tabs #qTabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="profile" tabIcon="contact"></ion-tab>
</ion-tabs>'
})
export class TabsPage {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    tab1Root: any = HomePage;
    tab2Root: any = ProfilePage;

    constructor(public playerService: PlayerService, public NavCtrl: NavController) {

    }
}
2

Hey!

I’ve been struggling with this… But found a way to get it working.

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})

export class MyApp {
  rootPage: any;

  @ViewChild(Nav) nav;

  constructor(){
    if (!this.navChild.getActive()) {
      this.rootPage = TabsPage;
    } 
  }

  test(): void {
    this.navChild.setRoot(TabsPage, { tabIndex: 1 });
  }

}


@Component({
    template: '<ion-tabs [selectedIndex]="mySelectedIndex">
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="profile" tabIcon="contact"></ion-tab>
</ion-tabs>'
})
export class TabsPage {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    tab1Root: any = HomePage;
    tab2Root: any = ProfilePage;

    constructor(public playerService: PlayerService, public navParams: NavParams) { // Inject navParams to get the index we want
      this.mySelectedIndex = navParams.data.tabIndex || 0;
    }
}

Let me know if this solves it.

1 Like
3

Hi, where do you get navChild from? I can’t see it anywhere else in your code?

4 
@ViewChild(Nav) navChild: Nav;
5

ah ok, thanks.

I was unable to get this method to work (from app.component), however this works for me:

constructor(private app: App…

    this.app.getActiveNav().parent.select(1);
2 Likes
6

I know I’m late. ZiFFel’s solution is correct, what was not mentioned is to inject navParams in TabsPage constructor and use @ViewChild to get reference of the tabs #mytabs then select the tab from the tabsRef.

7

Simply perfect. Nice and clean solution, thanks!