Hi
I have two tabs- Tab1 and Tab2
Tab1 is home tab. This tab contain item-list. in this there are 04 list. List1, List2, List3 & List4
I want that, When I click on any list. It will open corresponding page in the tab2. Is it possible. Plz Help.
Thank You all.
Take a look at this demo app Iāve built showing how to do this.
What would be the best way to load a new page into Tab 2 once you have selected it? I can select Tab2 and the app changes to Tab2 but the āLoadDifferentTab2Pageā is pushed into the previous tab and not into Tab2?
goToTab2() {
//Here, we need to jump up to the parent nav
//basically the tabs page
//and call select form the Tabs api
this.nav.parent.select(1)
this.nav.push(LoadDifferentTab2Page, params, { animate: true });
}
Hello, have you found a solution to this? Thank you!
I didnāt find a real proper solution. I did something with the events to make it kind of work. Hope to find an official solution. 
In my case Iām in a page0 in tab0 and want to change to tab2 and push page2 so when the user clicks the Back they go to the root of tab2. I had to use setTimeout because the tab change seems to happen async. But this is very fragileā¦
@Component({
selector: 'page-maps',
templateUrl: 'maps.html'
})
export class MapsPage {
...
changeTabPage(map: Map) {
this.navCtrl.parent.select(2);
setTimeout(() => {this.navCtrl.parent.getSelected().push(CourseEditPage, map)}, 100);
}
...
}
There is a tab selected event that is fired and contains the selected tab. I guess I could push the desired page into the Tab so when it changes it could do the page push and then delete the desired page data. At least then it wonāt rely on the speed of the tab change.
try this, it worked for me in my project:
import { App } from 'ionic-angular';
@Component({
selector: 'page-maps',
templateUrl: 'maps.html'
})
export class MapsPage {
constructor(private appCtrl: App) { }
...
changeTabPage(map: Map) {
this.appCtrl.getRootNav().getActiveChildNav().select(2);
this.appCtrl.getRootNav().getActiveChildNav().getByIndex(2).push(CourseEditPage, map);
}
...
}
What was the solution you tried? I tried to publish and event but once Iāve navigated away to the other page the event doesnāt seem to register. How did you get it working?
Did you figure out a better solution in the end up? I tried this solution here and it appeared to work, but I didnāt really understand how it worked. Whatās actually going on with the setTimeout() line of code?
Thanks! 
That approach was working fine. I also āsolvedā the problem by removing the tabs from my app - I needed the screen space on small screens.
setTimeout (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) delays running the anonymous function by 100ms. Itās a hack. So tab number 2 is selected and the code to perform the āpushā of the new page is queued up and will run approximately 100ms after the select() is started.
AFAIK setTimeout() lets the main JS thread run so the select() will be performed (that will cause navCtrl.parentās selected tab to be updated). Then calling parent.getSelected() should return the newly selected tab. So then the push() happens on that tab instead of the previously selected tab which is what would have happened if you didnāt use setTimeout().
If select() was blocking or had a Promise interface you wouldnāt have to use this hack.
Hope this helps.
Great, thank you so much.
Works like a charm!
Iāve been dealing with this for a while as well:
https://stackoverflow.com/questions/49888568/push-pages-using-tabs-ionic
The only problem is that itās open this tab and after the page, doing a weird transition
Try
changeTabPage(map: Map) {
this.nav.parent.select(0).then(() =>{
this.nav.parent.getSelected().push(CourseEditPage, map);
});
}
It really worked. Thanks
@Xiwi Did you find a solution to avoid the weird transition (open tab -> open page)?
I think this was fixed on Ionic 4
this.navCtrl.parent.select(1);
solved my problem in ionic 3 tab app.