How to nav.push outside an ion-tabs?

Ionic Framework ionic-v3
42

Thanks! Works fine in rc5 too.

43

working perfectly thanks @nandy0111

44

nice this works… But my back-button is gone now… How can I set it back ?

So I like to have a new set of tabs but also the back-button in the top

1 Like
45

This is really perfect even for pop

46

works like charm. thanks very much u saved me loads of time

1 Like
47

Hi, the solution i gave to solve this behavior was extends the tab component and re implement this two methods

initTabs() { } //here i remove the line when seleted the first tab
select(tabOrIndex: number | Tab, opts: NavOptions = {}) {} // here i rewrite the code where navController push the selected tab to the stack of route and manually put this code

this.parent.push(selectedTab.root,{
fromTabComponent: true
},{
animate: true,
progressAnimation: false,
duration: 100
});

put on any component where i can see the tab shortcut, the definition of the tab, in my case i create a custom component for that purpose.

now the component tab you cant use more like a shortcut navigator like a tab and you cant view the back button

I hope I’ve helped

48

Niiiice!! Thank you!!

1 Like
49

Use this.app.getRootNav().push(LoginPage) instead

1 Like
50

I got the following error when using this:
property ‘app’ doesn’t exist on type …
Please let me know about.

Thnx.

51

Helped a lot.
Thnx dear.

52

Hi @rdekleijn,

Did you find a solution to be able to get the back button?

53

It works now, let’s say you have a tabbed page called myTab1.

(Like usual, your destination page must be declared in app.component.ts and inside the current tabs page).

Simply create a function like this on the page controller (myTab1.ts file)

goToOtherPage() {
  this.navCtrl.push(LoginPage);
}

and a button in the view (myTab1.html file)

<button ion-button (click)="goToOtherPage()">Go to Other Page From Tab</button>

I’m using Ionic 2 and it is called from tabs pages. It works and i See the back button.

Hope it helps, François :slight_smile:

54

I’m trying to do this.app.getRootNav().setRoot(HomePage) inside a tab to go back to a new Page that has a side menu, but the toggle button it’s not showing up when the page is set.

55

I don’t see how this can work. I suggest you read more about rootParams (for tabs) and navParams (for pages). But feel free to show the logic of the code, so we can make some tests.

56

This is my idea. I have a MainPage, which has side menu and a list of items. When you click on an Item, you go to ItemDetails page which has 2 tabs. The tabs page works fine.
I found a solution and the problem too.

When clicking an Item, I was doing this.navCtrl.push(ItemCatalogPage); and it goes perfectly into the tab. The problem was to go back to MainPage, the side menu the first time was shown and very quickly disappears ( the rest of the page works okay and there wasn’t any error). If i go again into tabs page and go back, the side menu appears. I was going back doing this.app.getRootNav().setRoot(MainPage);. Inspecting the doing, I could see that the side menu was still alive and all the MainPage too, because I did a push of a new page on the stack. The real problem is when you set a new root page and the existing pages are not removed.

My solution? Instead of doing a push to go to tabs page, I called this.app.getRootNav().setRoot(ItemCatalogPage); and now the side menu and main page were removed, then the same for going back. Of course I had to add manually the transition options manually, but that makes sense.

Any idea of why the side menu was not removed when calling this.app.getRootNav().setRoot(MainPage) ? is it clear? I can create a test project to show this if needed.

57

Hello Sergio,

Let me think that out loud with you.

If you wanna change RootPage inside the RootPage, or your construction, there is first a navigation scheme issue (You navigation/UI shoudn’t be allowed to do this and that, unless, you have full guest access inside your app). Then, you must define an Observable as a service Provider something like a token or email across all the app. Took me one day to figure it out, but i did.

Good luck,

58

After, if you still can’t figure out to push a page inside a Tab children page with Ionic V2+, I suppose (only suppose) your application is bad coded somewhere.

59

Hi Francois,

I have authentication but I leave that aside for explaining the problem.
What’s wrong of changing from Root to Root, that’s how certain pages work,
like page with tabs or side Menu?
The issue here is if you are on side menu page and call
navigationCtrl.setRoot, the page is not complete removed from the stack,
and because you set root to a new page, going back to the side menu page
doesn’t work because somehow the side menu exists.
I will create a small project to show you this.

60

jo spweetuy; p, Ăšu woait

61

Wow that work perfectly. Thanks bro