It’s possible to change the active tab from a function call? I didn’t found any method for that on the documentation.
Cheers,
Igor
EDIT: the Tabs component has a select() method…in the API docs (not the component docs). Try that,. tabs have their own nav stack.
Hi I’m not on a computer to confirm but don’t you just push the tab page object onto the nav?
Either push or setRoot depending on what you want to achieve.
Like say not on machine to confirm and my memory on this is still getting filled up 
Hi,
I did so by doing a nav.push and disable the view of the back button on the resulting page.
Otherwise you get a weird navigation effect when the user selects navigation on the tab.
Regards
Tom
1 Like
If you are in a child you can use DI to get a reference to the tabs and use select()
If you are a parent component with tabs in your template you can use ‘@ViewChild(Tabs)’ in your class definition to get a reference to the tab component then do select()
This is the solution that worked for me:
import {Tabs} from “ionic-angular”;
@Page({
template: <ion-tabs #paymentTabs [tabbarLayout]="tabBarLayout" [selectedIndex]="tabsIndex" preloadTabs="false"> <ion-tab tabIcon="list-box" tabTitle="Tab1" [root]="tab2"></ion-tab> <ion-tab tabIcon="list-box" tabTitle="Tab2" [root]="tab2"></ion-tab> </ion-tabs>,
})
export class PaymentTab {
@ViewChild(“paymentTabs”) paymentTabs: Tabs;
constructor() {
//
}
ngAfterViewInit() {
setTimeout(() => {
console.log(“this.paymentTabs”);
this.paymentTabs.select(1);
}, 500);
}
}
Cheers,
genbliz.
7 Likes
Thanks, but i’m having a little trouble implementing this, because I need to call the tab change from within a modal just after it gets dismissed. on your example you are doing it from the same Tabs component right?
1 Like
Yes.
I am calling it from the parent tabs component.
Please, paste your code here it you are still having issue(s).
Thanks.
1 Like
genbliz,
do you have any documentation on how to do it from a function call from within one of the tabs child components?
cheers
I also had a need to switch programmatically from a tab1 to a tab2 upon a click on a list item in the tab1.
It took me a lot of time to find the right level of interaction but it turns out to be very simple
In my child tab, I call :
this.nav.parent.select(tabIndex);
You probably already found an answer to your problem, but I hope it can help others.
51 Likes
@cebeka It works perfectly! Thanks
It looks like it is working fine, but the tab icons sometimes doesn’t change the outline class.
Did you have this problem ?
doing the following works for me (including active state of the tab-icon)
private app: App
this.app.getRootNav().getActiveChildNav().select(1);
The “top-down”-approach works better for me
14 Likes
Thanks, did the trick on RC3 !
Thx. Works for me 
Works on RC4 too! Many Thanks!
Does anyone know how to take it to the next level and pass in some params onto that page?
2 Likes
thanx man. its working
thank you this is great!
I have a case where all these solutions don’t seem to work 100%.
In my case I’m switching the tab when a callback from a cordova plugin comes.
The result is, that the tab content gets switched but the icon in the tab bar doesn’t change from inactive to active.
export class AboutPage {
tabs:Tabs;
constructor(public navCtrl: NavController,public platform: Platform, public events: Events, public http: Http, public app: App) {
this.tabs = navCtrl.parent;
}
ionViewDidEnter(){
let Outer = this;
cordova.plugins.camerapreview.setOnPictureTakenHandler(function (picture) {
Outer.tabs.select(0);
});
cordova.plugins.camerapreview.startCamera({x:0, y: 60, width: this.platform.width(), height: 200});
}
ionViewWillLeave(){
cordova.plugins.camerapreview.stopCamera();
}
}
The switch works fine if I do it e.g. from setTimout handler:
setTimeout(function() {
Outer.tabs.select(0);
},1000);
1 Like
I would suggest trying the ionic-native shim around that camera preview plugin. It likely will solve your issue (which is related to zones and change detection).