CODEWITHSUNDEEP
androidionic-frameworkviewtabs
Benpeterscode
Benpeterscode

Reputation: 93

IONIC3 - How to link to the actual tab page instead of setRoot or push to page

this.navCtrl.push(ToDoPage)
this.navCtrl.setRoot(ToDoPage)

When I use either of these my app is navigated to the correct location, however it presents the page within the tab view that I'm in. Here is my homepage: enter image description here

And then when you click on the "View All" button, you can see below that I'm on the To Do page, however I'm still in the Home Tab. Is there any way to make it so that when I press a button on the home page I am taken to the actual To Do Tab Page?

Here you can see that I'm on the To Do page however I'm still in the Home Tab

Upvotes: 0

Views: 686

Answers (1)

David
David

Reputation: 7507

To do what you want you do not need to .push() a page on the navigation stack, thats not how the ionic-tabs work. You can imagine each tab as its own navigation stack. With .push() or .setRoot() you can only modify the stack of the currently selected Tab.

To switch tabs you can use the .select() method of the ionic Tabs component. First of all you need to add a template reference to you component to get ahold of it in your typescript code:

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
</ion-tabs>

Then you access the component using Angulars @ViewChild decorator:

@ViewChild('myTabs') tabRef: Tabs;

And when you click on your button you select the second tab like this (put it in a function):

this.tabRef.select(1); // selected tab is an index starting at 0

And here you can find the docs for all of this.

Upvotes: 2

Related Questions