Angular mat-tab-group vs nav mat-tab-nav-bar

Question

I'm using Angular material to create a tab component. While reviewing the documentation I notice that there are two ways to create this component: https://material.angular.io/components/tabs/overview

One option requires routing and the other option does not (I can nest a component as a directive inside the mat-tab). I'm able to achieve the same results with either of the options.

I don't quite understand in which case it would be better to use the routing option vs the non-routing option. Anyone know the pros and cons?

Answer 1

I don't quite understand in which case it would be better to use the routing option vs the non-routing option. Anyone know the pros and cons?

• Use mat-tab-group when you want users to tab between contents in a single page.

• Use mat-tab-nav-bar when you need a top navigation that has tab-like styling. When users click on one of the tab, it will navigate to a different route. eg, you have Home, About Us, Contact Us.

This is the direct quote from Material Official site:

While <mat-tab-group> is used to switch between views within a single route,

<nav mat-tab-nav-bar> provides a tab-like UI for navigating between routes.