The Tab component allows us to manage multiple views by displaying one view at a time. 

Implementation

To begin, add the MatTabsModule to your project. Go to the app module file, add the import statement, and add it to the app.

Using the Tab Component

To add the Tab component, use the mat-tab-group element.

<mat-tab-group></mat-tab-group>

To add a tab, add the mat-tab element inside the tab group. Then label it by applying the label attribute to the tab and setting it.

<mat-tab-group>

For multiple tabs, add multiple mat-tab elements inside the tab group.

<mat-tab-group>

To add content for each tab, put all your content in between the mat-tab tags.

<mat-tab-group>

Custom Labels

If you want your tabs to be more than just text, remove the label attribute from the tab element, put a pair of ng-template tags inside, and then apply the mat-tab-label directive to the template element.

<mat-tab-group>

Inside the ng-template element, define your custom label. For example, we can use an icon.

If you are unsure on how I used the mat-icon element to create the icon, watch the video on the Angular Material Button Component. It will show you how to add and use Angular Material icons.

Useful Attributes

To disable the tab, apply the disabled attribute and set it to true if you want it to be inactive or false if you want it to be active.

We can also place the tab headers at the bottom of the content. Apply the headerPosition attribute to the mat-tab-group element and set it to below if you want the tabs to be at the bottom or above if you want it on the top. By default, it will be above the content.

<mat-tab-group [headerPosition]=" 'below' ">

If you notice, our tab labels are only taking the space it needs to display the contents inside the tab area. 

<mat-tab-group mat-stretch-tabs>

Changing the Theme

Lastly, we can change the theme of the header.

[backgroundColor]=" 'primary' | 'accent' | 'warn' "

<mat-tab-group [backgroundColor]=" 'primary' ">

To change the line under the active tab, apply the color attribute and set it to primary, accent, or warn as well.

<mat-tab-group [color]=" 'warn' " [backgroundColor]=" 'primary' ">