NavController - How to replace current page?

I have next flow:

Contacts page -> nav.push(NewContact) -> nav.push(ContactCreated)

How do I make that on the ContactsCreated page the “Back” button return user to root “Contacts” page instead of the NewContact page? So I would like to repalce a page in the navigation stack.


1 Like

I tried nav.remove(1) but that brings me to 1st page immediately. I feel this replacement should be done in place of nav.push(ContactCreated).

    templateUrl: 'app/contacts/contact-created.html',
    directives: [User1stForm]
export class ContactCreated {
    contact: Contact;

        private params: NavParams,
        private nav: NavController,
        private http: Http
        //private contactsProvider: ContactsProvider
    ) { = params.get('contact');


I don’t think there is a poproot() method?

I don;t need to popRoot. What I need is to replace Page 1 with Page 2 and keep root in stack.

Root Page

  • Page1
  • Page 2

Mind elaborating why? I can think of scenarios where users may not prefer that, maybe your solution is the best in the given case though.

Have you tried pop() and then push(Page2) immediately?

I pretty much described scenario but I;ll try to explain in more details.

On root page I have list of contacts and a “New contact” button. When user clicks it he come to the “New contact” page where she has a “Back” button. By clicking “back” she is canceling contact creation. If she created contact I want to bring here to a “Contact created” page where I want to offer some actions (like inviting the contact to app by email for example) but user can skip this step. To me it seems natural to have a “Back” button but it should not go the previous page with a form to crearte a new contact - she/I expects to get to contacts list.

Does it sounds sane?

Sorry - didn’t read your first post. Thanks for detailing.

Seems logical. It appears you could solve this with a modal. iOS 9 phone/contacts app brings up a modal, after which the user is navigated to the new contact.

I haven’t had a reason to try but look at this post and how they add an ng-click to the back button

You could check the current state and if on the state for the new contact use $ionicHistory.goBack(-2) otherwise use $ionicHistory.goBack() to go back to the previous page for all other states.

Make sense?

Modal is kinda OK, but I want to slide back from the ContactCreated page to ContactsList without showing the intermediate form.

I’m thinking to try again nav.popToRoot() - it had bug when I tried a week ago & did not work.

I was trying nav,popToRoot() earlier trying to fix my problem here

I didn’t get it to work.

Did you?


Am getting error:

TypeError: Cannot read property 'instance' of null
    at http://localhost:8100/build/js/app.bundle.js:66056:70
    at Tab._stage (http://localhost:8100/build/js/app.bundle.js:66112:25)
    at Tab._transition (http://localhost:8100/build/js/app.bundle.js:66051:19)
    at Tab.popTo (http://localhost:8100/build/js/app.bundle.js:65884:19)
    at Tab.popToRoot (http://localhost:8100/build/js/app.bundle.js:65897:26)
    at TransferCreated.skip (http://localhost:8100/build/js/app.bundle.js:75556:19)
    at AbstractChangeDetector.ChangeDetector_TransferCreated_0.handleEventInternal (eval at <anonymous> (http://localhost:8100/build/js/app.bundle.js:33039:17), <anonymous>:451:30)
    at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:32353:25)
    at AppView.dispatchEvent (http://localhost:8100/build/js/app.bundle.js:36011:46)
    at AppView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:36005:22)BrowserDomAdapter.logError @ app.bundle.js:48523
app.bundle.js:48523 ERROR CONTEXT:

I’ve created an issue:

@richardshergold it is supposed to be fixed in master:

Hi just came across this, you need to rebuiild the nav path so in the constructor of contacts created reset the root and push the ContactsCreated page.
//you might want to pop some pages -> this.nav.pop();

the back from ContactsCreated will then bring you to contacts

1 Like

worked for me.

1 Like

I had the same issue and wrote a short post about the solution that worked for me

      .then(() => {
        const index = this.viewCtrl.index;

thanks this is what i did for my use case

    let alert = Alert.create({
        title: 'SENT!',
        subTitle: message,
        buttons: [
            text: 'OK',
            handler: () => {
                this.nav.push(WorkPage).then(() => {
                    const index = this.nav.getActive().index;

I have asked one qn there … can u give answer of that bez i am facing an issue ,

Woo… you save my time … working grate !!