Using navCtrl.back() does not animate the page transition

On my page, I need to be able to go back to the previous page in code, as well as the <ion-back-button></ion-back-button> .

If I click on the <ion-back-button></ion-back-button> , the page transition back works perfectly. It slides left->right.

However, if I call this.navCtrl.back(); in my code, it simply displays the previous page with no transition animation.

If I try and use this.navCtrl.navigateBack, it animates the wrong way. It does a right->left transition instead of left->right. Plus the fact that I don’t necessarily know what page called this page and I simply want to pop it.

Any ideas how to get the in code .back() to animate properly?

As requested, here’s a bit of code:

From the parent page:

editAppt(appt: IAppointmentModel) {
    const navigationExtras: NavigationExtras = {
        state: { appointment: appt }
    };
    
    this.router.navigate(['/appointments/appointment-edit'], navigationExtras);
}

Appointment Edit page HTML:

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Appointment Edit</ion-title>
        <ion-buttons slot="end">
            <button type="button" class="btn btn-primary" (click)="onSaveAppointment()" style="padding-bottom: 3px;">
                <i class="fas fa-save"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

Appointment Edit Typescript:

...
async onSaveAppointment() {
    await this.appointmentsStore.updateAppointment(this.appointment);

    this.navCtrl.back();
}
...

First click on the back button: Transition works
Second click on the save button, which uses navCtrl.back() does not show the transition animation.

Can you post some of the actual code + markup + maybe a gif showing what’s happening?

That would help people to answer your question.

I’ve had animation issues before too and it might be something really dumb, but without anything to look at, it’s gonna be difficult to help.

1 Like

Added relevant code and a gif showing the problem.

Ok, so I just checked one of my projects. The examples below all reference Groups and a GroupsDetail page, but they are NOT nested in the routing definition.

To go into a page from a list view , I call this.nav.navigateForward('/groupEdit'); - > I get the expected animation.

Then in my detail page I either hit the ion-back-button OR run code this.nav.pop(); where nav is NavController -> expected back animation.

Observing possible differences:

  1. My pages are not ‘nested’ in the routes. Each route is defined separately in my app.module.ts - much simpler and works fine, with no unnecessary complexity.

  2. I have a defaultHref set on my back button.

  3. I am calling nav.pop, not back.

  4. I hate the iOS animations, so I have forced the app to run in md mode:

IonicModule.forRoot({ mode: 'md'}),

app.modele.ts snippet:

const routes: Routes = [
  { path: 'home', component: HomePage },
  { path: 'groups', component: GroupsPage },
  { path: 'groupsEdit', component: GroupsEditPage, canDeactivate: [CanDeactivateGuard] },
]

Try checking your stuff against my examples to see if that might help.

1 Like

Figured it out…

It was because I had

@Component({
    selector: 'appointment-edit',
    templateUrl: './appointment-edit.page.html',
    providers: [AppointmentsService, NavController]
})

Apparently by providing NavController, it creates a new instance that doesn’t know anything about the previous pages. Removing this fixed everything.

Thank you so much for your time spent debugging this with me!

2 Likes

FYI, AppointmentsService will suffer from the same fate. You virtually never want providers in a @Component decorator.