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.



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);



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: