Angular 8 + Material | Adding Tabs Component in Angular using Material v8.x.x

Tabs component organizes different content views at one area where only one is visible time and the user can switch them by clicking on each tab’s header name.

Angular Material Tabs create a beautiful layout filled with animation. Each tab section is provided with a header label name which can be clicked to show its content on the same place.

In this tutorial, we will add Angular Material Tab’s component and also discuss available options and features in Tab’s component.

Let’s get started!

Here we have an Angular project with Material with version 8.0.1 already installed.

Check here on How to Install Angular Material in Angular project.

Import MatTabsModule in App’s Module

To use any Material component we need to import it in the app’s module file to make it available throughout the application.

Now open app.module.ts file then import MatTabsModule and also add in imports array as shown below:

Add Tabs in Component

In the component template, we will add <mat-tab-group> directive which wraps all tabs to show.

Each tab with content is added using the <mat-tab> directive as follows:

This will create tabs layout in view:

Feature Options:

Disable Tab

Tab can be disabled by adding a disabled property on <mat-tab>

 

Custom Template for Tabs

A custom template on tabs can be added using NgTemplate with MatTabLabel directive

Set Active Tab

Active tab can selected by adding [selectedIndex] property taking index number(starts from 0) of tab on <mat-tab-group> directive.

Tab Change Event

(selectedIndexChange) on <mat-tab-group> is triggered when ever tab is changed amnually or by changing [selectedIndex] value.

Tab Header Position

Position ob Tab Header can be changed by adding headerPosition property on <mat-tab-group> with values ‘above‘ or ‘below‘;

Show Next Previous Arrows in Tab Header

Angular Material tabs will show Arrows for navigation automatically if they are taking up more space the view area. No configuration is required 🙂

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of