Open Tab from Button (inside another Tab)

Hey I am using Ionic Version: 2.0.0-beta.2.

Lets say we have two tabs ( ). On Tab 1 there is a button that is supposed to open Tab 2, just like it would when we hit the actual “Tab 2”-Tab. Nav.push with the root page of Tab 2 doesnt work because it opens the page in Tab 1 …

I’m also trying to figure this out. Forum and Google searches are turning up nothing.

I’d also like to know how to switch tabs and navigate to a tab’s sub-page from a button on another tab.

Alright guyz. This was the thing I was struggling for AGES. Let me clear up that for you.
First you need to know how to get components from ionic.

public app: IonicApp,
) { = app;

ngAfterViewInit() {
  // Here 'my-content' is the ID of my ion-content
  this.content ='my-tab');
  console.log("Yo we get the tab", this.content);

After you get the tab. You can all the glory functions --> Liike;

Unfortunately the getComponent method is not available since beta-7. Any idea how to get a reference to the tabs component now?

Solved it:

Inject the Tabs in the constructor:

constructor(private tabs:Tabs) {}

And then:

switchTab(tabIndex) {;

In this case:
what is your tabs import? (imported in module as well?)

I am getting a no provider error.

bah. the second I post something I find the answer…

import in module:
import { IonicApp, IonicErrorHandler, IonicModule, Tabs } from ‘ionic-angular’;

put in providers area

import in page of tabs
import { IonicPage, NavController, NavParams, App, ToastController, Tabs } from ‘ionic-angular’;

and place in constructor
note: pages are zero indexed

Your answer seems helpful, yet a little bit confusing.
Could you please provide CodePen example or repository link with source code?

I’m asking because I don’t quite understand what “module” file you are speaking about (e.g. app.module.ts or some pagename.module.ts , etc.)

sorry no codepen example…

yes in app.module.ts
do this:
import { IonicApp, IonicErrorHandler, IonicModule, Tabs } from ‘ionic-angular’;

put in providers area
providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler},

then in the page of the tabs you do this:
import { IonicPage, NavController, NavParams, App, ToastController, Tabs } from ‘ionic-angular’;

constructor(private tabs: Tabs) {}

And then:

switchTab(tabIndex) {;

Don’t inject Tabs. Just bind [selectedIndex] to something and change it instead.

I believe that I’ve found a simpler solution in the Ionic documentation:
You can also switch tabs from a child component by calling select() on the parent view using the NavController instance. For example, assuming you have a TabsPage component, you could call the following from any of the child components to switch to TabsRoot3:

switchTabs() {;


I tried before @ViewChild but it doesn’t work well when there is ngIf in the ionic html file. So, to achieve what you’re asking for, I used Router to navigate to the tab since NavCtrl involves backward and forward animation, so it’s weird to do that with tabs.

Here’s how:

// inject router in the constructor of the ts file where you want to navigate from tab 1 to tab 2

constructor(private router: Router)

// function to open tab 2
openTab() {

in case you want Tab 2 to know that it was loaded by action from Tab 1 and you want to do some certain action in Tab 2, you can add data in the NavigationExtras parameter of Router.navigateByUrl:

Router.navigateByUrl(url: string | UrlTree, extras?: NavigationExtras)

Then you can handle that data on Tab 2 ngOnInit or ionViewDidEnter

Good luck!