Open Tab from Button (inside another Tab)

Ionic Framework ionic-v3
1

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

Lets say we have two tabs ( http://ionicframework.com/docs/v2/components/#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 …

2

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.

3

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.

constructor(
public app: IonicApp,
) {
this.app = app;
}

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

After you get the tab. You can all the glory functions --> Liike
this.content.select(0);

4

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

5

Solved it:

Inject the Tabs in the constructor:

constructor(private tabs:Tabs) {}

And then:

switchTab(tabIndex) {
    this.tabs.select(tabIndex);
}
3 Likes
6

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

I am getting a no provider error.

7

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

8

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.)

9

sorry no codepen example…

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

put in providers area
providers: [
StatusBar,
SplashScreen,
LaunchNavigator,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthProvider,
DataProvider,
Tabs

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) {
this.tabs.select(tabIndex);
}

10

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

11

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() {
this.navCtrl.parent.select(2);
}
"

2 Likes
12

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() {
   this.router.navigateByUrl('tabs/tab2');
}

Bouns:
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!