[Tabs] Slide animation for mat-tab-nav-bar

[dflor003]

Please describe the feature you would like to request.

It would be nice if there was an option on nav[mat-tab-nav-bar] with a[mat-tab-link]s that allowed it to animate the same way as a regular <mat-tab-group> with <mat-tab> elements.

Currently, with something like the following, you get animations when switching between tabs:

<mat-tab-group>
  <mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

However, if you switch to using a <router-outlet> to navigate between tabs, you lose the slide in/out animation and must either forego the animation altogether or implement your own equivalent animation, which may make the UI inconsistent with other areas of your app that use <mat-tab-group> unless you are able to reproduce the same effect 100% the same.

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

<router-outlet></router-outlet>

What is the use-case or motivation for this proposal?

Say you have a user profile screen that is using <mat-tab-group> to separate out various areas of your user profile. At one point, you may find that it is better for maintainability if each tab was its own component so you do not need to have one giant component with every piece of data that may show up across any of the tabs.

This is also better if, for example, each tab fetches data from a different source and you'd like to delay that network call until navigating to the tab (although lazy-loading may handle that as well).

Also, in a lot of cases, it would be more ideal to be able to deep link into a given tab by using a <router-outlet>, which is why mat-tab-nav-bar seems like a good fit for something like this.

Is there anything else we should know?

A work around may be to build separate components, have those components be within each <mat-tab>, and then manually wire up the active tab state in the router via query string or route params. However, it looks like mat-tab-nav-bar was built specifically for this use-case, so it may be worth just baking the functionality into mat-tab-nav-bar.

[andrewseguin]

Thanks for providing the feature request. Right now we do not intend to implement an animation with the nav and router. It sounds like it would be best to just use the tab group for your use case

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}