You mentioned to me to use this.nav.setRoot(TabsPage), but still not sure where I should add that line.
Don’t forget, before my “TabsPage”, I have other pages and I want to be able to go back to the previous page (the one before going to the tab one).
Page 1 (page1.ts)–> Page 2 (page2.ts) --> go to TabsPage (TabsPage.ts) --> Tab 1 (tab1.ts)
I saw there is this.nav.pop and this.nav.popTo. So what I tried is from tab1.ts, I added a back button and called this.nav.pop() and this.nav.popTo(page2.ts). None of them gave me the previous page. I could understand that the first “pop” did not work, but don’t know why the “popTo” did not work.
Here my temporary solution. If someone has a better one, please share with me.
I put my <ion-tabs> within a <ion-content> and add a <ion-navbar> to that same html. The only “issue” that I see is it gives an extra space below the <ion-navbar>. It creates a <ion-navbar-section>. Maybe there is a way to remove it, but don’t know yet
UPDATE: With the help of another post, I added the below to fix the issue
I think when you use setRoot to change to a new page it redefines the navigation stack, so this new page will become the new root and there won’t be anything to go back to (no back button). When you use push it will add to the stack and the back button will be present. Just double check you are not changing to the tabs page with setRoot.
Hi icarus_31 I have had the same problem. I finally solved it including at the beginin of the tab page the following: <ion-header> <ion-navbar> <ion-title>You can also add a title here</ion-title> </ion-navbar> </ion-header>
I don’t need to add <ion-content> section and I don’t get any extra space. Probably I am late but anyway here is my answer :).
Adding an <ion-header> to the tabs page is an interesting workaround, but it could be potentially hazardous as this new header overlays any sub-tab-page header. Beware!