Setting IonicModule navAnimation per component

I have a page transition animation working using ionic 5. Currently this is how I set the animation,

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,
    IonicModule.forRoot({
      navAnimation: customAnimation
    }),
    AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The problem witht his methid is that all pages are animated the same. How can I set navAnimation per component basis?

I tried adding this to one of my page modules,

NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule,
    IonicModule.forRoot({
      navAnimation: customAnimation
    }),
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

But this doesnt do anything at all.

Judging from #18209, you’ll need to wait for 5.2.0.

1 Like

I got animation working on a new blank project by following the angular route animation tutorial.
https://angular.io/guide/route-animations

But instead of using ion-router-outlet, I had to use router-outlet. Is there any difference between these two? What extra functions does ionic offer?

Yes, there’s a huge difference. router-outlet will not work the same way as ion-router-outlet. As @rapropos has said, wait until 5.2, which will support per-component animations.

1 Like