Removing previous page from Nav stack


In my app I have three pages

page1, page2, page3

From page1 I used nav.push(page2) to come to page2.

In page2 on click of a button I want to move to page3 and then remove page2 from the nav stack.
So that the nav stack is page1 =>page3 and when the user clicks back on page3 it comes to page1.

My current working solution is to do this.


The only problem is the that the transition goes like this page2 => page1 =>page3. I would not have bothered about this if this was not visible. But this transition is visible.

Any other variation I tried either breaks the nav in the the page or disables the back button on the navBar thats created using menuToggle.

Can some one suggest a way to effectively deal with this requirement.


1 Like

You can use remove.

this.navCtrl.push(page3).then(() => {
  let index = 1;

Hi @pwespi,

The problem with that approach is that I don’t know my index number. And navCtrl.getPrevious or navCtrl.getViews fails in the then() because the navCtrl is still transitioning.

I attempted to do this in the Page3’s ionViewWillEnter().

if(this.navCtrl.getPrevious().name == "Page2"){
      console.log("Remove Page2");

The problem is that this also breaks my backbutton created using ion-toggel in my nav bar on Page3. In fact this breaks all links in Page3.

Any other solutions that’s available? or a Working code.



Would that work?

this.navCtrl.push(AboutPage).then(() => {
  let index = this.navCtrl.length()-2;

Hey @pwespi,

Unfortunately it did not.

All links break. I think the problem is the same.

I am thinking of another way. Use a ViewCtrl Array and loop through and remove the page2 and add page3. Then use setPages(). I will let you know soon.

I am also actually considering a redesign of my form components since my page 2 is forms add/edit data and page 3 is display form data.

I am planning to either use a modal instead of page 2 or combine pages 2 and 3.

But that is probably for the next release.

I will for now stick to viewCtrl.dismiss() or navCtrl.pop() on page 2 followed by navCtrl.push().


.then(() => {
  const startIndex = this.navCtrl.getActive().index - 2;
  this.navCtrl.remove(startIndex, 2);
1 Like


Any solutions to this ? I encouter the same problem.

I push a parameter page from a popover, i want that the user go back to the root page when he press the backButton.

What i want to do is :


I tried this :

    this.viewCtrl.dismiss('popover').then(() => {'ParamPage').then(() => {
        this.navCtrl.remove((this.navCtrl.getActive().index)-1, 1);

But in popover, this.navCtrl.getActive() is undefined…

Then i tried this :

    if ( this.navCtrl.canGoBack()) {
      console.log('can go back true');
    this.viewCtrl.dismiss('popover').then(() => {'ParamPage').then(() => {
        this.navCtrl.remove(1, 1);
      }); //we push from RootPage and not from PopoverNav, allow to use BackButton 
    else {
      console.log('can go back false');
      this.viewCtrl.dismiss('popover').then(() => {'ParamPage');

But this.navCtrl.canGoBack() is false even if i’m not in the rootpage… Don’t understand why…

I use this before finding a solution, but we see the transition :

ionViewCanLeave() {



Late on the discussion but it worked for me…

let currentIndex = this.navController.getActive().index;
this.navController.push(DestinationPage).then(() => {

Your solution works like a charm :grinning:


I am using Ionic4 , But I don’t see navController features what it have in the Ionic3 NavController. How can we removing previous page from Nav Stack.

Could please anyone help me on this.

Ionic 4 nav uses angular router. Refer

That explains the changes really well. Also refer ionic 4 docs and angular routing docs.

Thanks SD1985 for replying. I don’t find any solutions in that link.

NavController uses angular routing procedure but we can’t remove previous page from nav stack using below methods.




it is appending page in the nav Stack.

Have you tried the following?

this.navCtrl.navigateForward("", { replaceUrl: true });

Since Ionic 4 uses Angular router, the replaceUrl boolean is an Angular option.