Angular material tabs animation breaks when using routerLink

Question

I'm implementing angular material tabs in my angular 6 application. If I use the material tabs without binding to routerLink then the sliding animation works and the content in router outlet works. However when I bind to routerLink the sliding animation doesn't work and the content just appears in a very clunky way.

<div class="my-3">
    <nav mat-tab-nav-bar>
        <a mat-tab-link
            *ngFor="let tab of tabs"
            [routerLink]="tab.path"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{tab.label}}
        </a>
   </nav>
</div>

<router-outlet></router-outlet>

The paths are declared inside of the component template:

tabs: any[] = [
    {
        label: "Details",
        path: "details"
    },
    {
        label: "Users",
        path: "users"
    }
]

And the modules are loaded lazily.

Does anyone know why the animation breaks? I have done some digging around to find an answer. I am importing BrowserAnimationsModule from '@angular/platform-browser/animations' in app module and I am not declaring any NoopBrowserAnimations anywhere either.

Any help would be much appreciated.

I'm guessing that you must define animations for router outlet. If you happened to resolve that please post it:) — ahaw

Mihai Borbea Mihai Borbea · Accepted Answer · 2018-12-02T12:44:01

In order to achieve tabs animation on mat-tab-link as on regular mat-tab you need to define a route animation for your <router-outlet>.

Here is a good example on route animations: https://angular.io/guide/route-animations

Angular material tabs animation breaks when using routerLink

1 Answers