[Tabs] Slide animation for mat-tab-nav-bar (Continuation)

[domvelo]

Continuation on a bot closed issue. Due to inactivity. #15570

@dflor003 @andrewseguin This is a router animation issue. You switched from a inline tab navigation to a tab router navigation. The tab content has nothing to do with the Angular Material tab content component. You have to implement route transition animations.

If possible, the Angular Material framework should implement this route transition animation for the mat-tab-nav-bar. Maybe it can be done by a wrapping component? Around the nav and the router-outlet. I'm currently experimenting a bit with tab routing. The next step is to bring back the animations. I have no working demo yet...

Currently I have only a solution to store router data for the tab index and animate inrement or decrement with slide left or right. Some snippets:

export const tabAnimation = trigger('tabAnimation', [
  transition(':increment', slideRight),
  transition(':decrement', slideLeft)
]);

const routes: Routes = [
      {
        path: 'some-route',
        component: SomeComponent,
        data: { index: 1 }
      },
      {
        path: 'another-route',
        component: AnotherComponent,
        data: { index: 2 }
      },
];

  public getRouterOutletState(outlet: RouterOutlet) {
    return outlet.activatedRouteData === undefined ? -1 : outlet.activatedRouteData.index;
  }

<main [@tabAnimation]="getRouterOutletState(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

(main or div or whatever.)

Google for "angular router tabs animation". Find e.g. this on stackoverflow

It works. But I'm sure there is a more elegant way. For example: How to get the tab index automatically. Without set custom router data. ... Maybe there is a way to pass the router data dynamically with the tab index. Or you just use one animation for both direction. Because the router data is only required if you want to decide you to slide. Left or right. Or just generate the router entries by a function and automatically add the index to the data.

[rruffer]

I saw the examples, but I was unable to implement the animations. Where and how are slideRight and slideLeft created?

[devversion]

Hello! Can you please clarify if this is a feature request or if you are just sharing solutions due to the closed previous issue?

As stated by @andrewseguin, we do not intend to implement routing transition for the tab-nav-bar.

[Alphanaut]

Thank you for providing the suggestion and link to use route animations. The issue was previously closed but seemingly without adequate consideration. A tab group is considerably easier to implement than the mat-tab-nav-bar, but a) one cannot link directly to a specific tab and b) we cannot reuse directives in a single page; certainly we can write our own custom directives as sub-components, but that is not always an option. Simply put, the trade-offs between tab-group and mat-tab-nav-bar should include routing, but not style and animation.

[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.}