Set the active tab in Ionic 4

I want to change the tab from certain pages in the app.

Using:

private app: App does not work in Ionic 4

I also created a local ref on the ion-tabs element and tried setting it using the ‘select()’ method - but i get this error:

TypeError: e.setActive is not a function

How can I select the tab programatically in Ionic 4
?

Feel free to completely ignore my opinion, but I think that it is part of a framework’s job to steer developers towards good UX choices, and this is a situation where what you are trying to do should be hard, if not impossible.

The natal metaphor for tabs comes from filing cabinets, where one could (for example) switch amongst “customers”, “billing”, and “orders”: all completely separate and independent groups of information. Tabs allow them to share screen real estate, by having only one be active at a time.

What goes on in each tab needs to be confined to activities in that tab: if I leave tab A to go to tab B and then come back to tab A, it should be just as I left it.

The decision to switch tabs should be at the sole discretion of the user. Sometimes there are circumstances under which some tabs might not be available: disable them instead of removing them from the DOM, and never “warp” the user magically from one tab to another.

To summarize, if I found myself in your position, my first thought would be “programatically shifting UI focus is generally a disorienting user experience. Am I absolutely sure I want to do that?” And if I’m still convinced that it is, then I would look for a different way to present the UI than tabs, because users would expect tabs to work in a certain way, and I’m not going to uphold that expectation.

Agreed the separation is better towards UX, however I am interested in knowing just how one would go about switching from tab to tab.

So there’s to ways to do this in the latest Ionic

  1. Using the select method of the ion-tabs component
  1. Calling the Angular Router APIs and just making that switch based on URLs
1 Like

@mhartington Thank you so much for quick response. Its working.

@ViewChild(‘app_tabs’) tabRef: IonTabs;
this.tabRef.select(“tabName”);

hello @SharanA may i ask on how does it works because i tried it but it show an error select is undefined thanks, im stuck in here.

It Cannot Work.What Will Do friend

Please check .select method calls after ngAfterViewInit.