CODEWITHSUNDEEP
angularionic4routerlink
CejasLocas
CejasLocas

Reputation: 33

How to disable navigation animation?

I have a project with a tabs component that is working fine until I want to implement navigation within a tab. For example, my TEAM tab has 2 subtabs/sections/pages TACTICS and INFORMATION, and if I'm on my tactics tab and I click this button:

<ion-button routerLink="/tabs/team/information">INFO</ion-button>

It navigates to that page with an animation. Is there any way to disable that animation? Or does it just happens because something in my code might be wrong?

Part of my tabs.router.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'team',
        children: [
          {
            path: 'tactics',
            children: [{
              path: '',
              loadChildren: () =>
              import('../team-tactics/team-tactics.module').then(m => m.TeamTacticsPageModule)
            },
            ]
          },
          {
            path: 'information',
            children: [{
              path: '',
              loadChildren: () =>
              import('../team-information/team-information.module').then(m => m.TeamInformationPageModule)
            }]

Upvotes: 3

Views: 2033

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

I think you can use routerDirection.

In this article it discusses using root to do an animation that looks like its replacing the entire view, which sounds like basically no animation:

 <ion-button expand="block" routerLink="/dashboard" routerDirection="root">
   Login
 </ion-button>

We add a block button which has two important properties: routerLink: The link/path that should be opened routerDirection: Determines the animation that takes place when the page changes

After a login, you most certainly want to ditch your initial page and start again with the inside area as a new starting point. In that case, we can use the direction “root,” which looks like replacing the whole view.

If you want to animate forward or backward, you would use forward/back instead.

Upvotes: 4

Related Questions