CODEWITHSUNDEEP
ionic2ionic3
DRNR
DRNR

Reputation: 453

Set active tab when navigating from one tab to another by button click

I have been struggling with this for a while now. I'm trying to navigate to one tab (let's say Home) to another (let's say About). I'm able to navigate that either the page get's added to nav stack, but then it's not changing active tab. That, or then we use select to set the active tab, which means that I lose the navigation stack. Here's the latter option code:

export class HomePage implements OnInit {

  tab: Tabs;

  constructor(public navCtrl: NavController) {
    this.tab = this.navCtrl.parent;
  } 

  navigate() {
    this.tab.select(1);
  }

But this means that as mentioned, I lose the nav stack and can't use the back button that would show if I use push. That brings us to the other option, when I use .push():

this.navCtrl.push(About)

The active tab won't change, but still shows Home as the active tab, even though we are successfully navigated to About tab.

So what I wish for, is to have both the 'Back' button and the active tab (About) selected when I'm clicking the button to go to About from Home. Here's a demo with the push option, as you can see the active tab does not change: https://plnkr.co/edit/6KIL8mxfTMCsvACpiD1K?p=preview

PS. I looked at this question, but it wasn't useful to me: Changing tabs dynamically in Ionic 2

I'm using Ionic 3

Upvotes: 3

Views: 3848

Answers (2)

David
David

Reputation: 7507

I don't think this is how the tabs component is intended to work. With tabbed navigation you kind of have n navigation stacks (where n is the number of different tabs you have) which means if you .push() a new page on the nav-stack you push it on the stack of the currently selected tab.

Switching to another tab kind of is the same as starting with a new root, you start with the initial page ([root]="yourFirstPage") and can then add new pages to this particular nav-stack (and you can pop them off the nav-stack with a back button).

In you particular example you are trying to .push() the About page on the stack of the Home page and expect the NavController to know that you intended to switch to another stack and to push a new page to the new stack.

One solution to your problem could be to always remember the previous tab when you use .select() and display back button manually in the navbar which uses .select(previousTab) on click.

I hope that makes things clearer for you.

Upvotes: 3

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

It's the default behaviour to act like this. When you select a tab it clears the nav stack and set the root to another page. When you push your about page when in home page you're pushing a new page in your home nav stack, this is why it doesn't change and shoudn't change.

The reason to use tabs is that you can segment and divide stuff in they correct categories. When updating a product you don't whant the user the see, for example, billing information in the same stack of products since it doesn't belongs to that category.

The .select() method (whose you've implemented in your home.page.ts) is the closest you can have from beeing able to select a tab without clicking in a specific tab.

What you can do is simply remove about from beeing a tab and push it in home OR remove the button to go from the home to about page, since there's already a tab for this.

In any case what you want to do is an error that Ionic team removed the possibilities from people doing.

Hope this helps you.

Upvotes: 2

Related Questions