Angular Material 14 Tabs Implementation Example Tutorial

Angular Material Tabs tutorial, In this detailed likewise the profound tutorial we will share with you how to add tabs in an angular application using the angular material library.

Plus, you will also learn how to add an active tab, set change event, change tab header position and create and implement the custom template in tabs.

Angular Material is an immaculate user-friendly library for creating beautiful user interface components. In this tutorial, we will discuss the one such component, which is tab.

Tabs are useful for displaying multiple contents in a single view. Tabs is a collection of numerous panels, in tabs, only the single panel is visible in screen’s view, you can enable the view of tabs by clicking on the tabs navigation.

Angular Material 14 Tabs Integration Example

Here are the steps towards integrating tabs in angular, therefore let’s start implementing the tabs in angular app:

Step 1: Create Angular Project
Step 2: Install Angular Material Package
Step 3: Import MatTabsModule in AppModule
Step 4: Implement Basic Material Tabs in Angular
Step 5: Enable Animation in Tab
Step 6: Disabling Material Tab
Step 7: Create Custom Tab Template with NgTemplate
Step 8: Change Tab Header Position
Step 8: Make Material Tab Active
Step 10: Add Change Event in Material Tab
Step 11: Test Angular Material Tab Component

Create Angular Project

This is the foundational step of this tutorial; it will teach you to install a new angular app using the angular cli tool:

ng new ng-material-tab

Move inside the project root:

cd ng-material-tab

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Install Angular Material Package

Next, you have to run the following command to install the angular material library in the angular app:

ng add @angular/material

Choose a prebuilt theme name or “custom” for a custom theme:

You can choose from prebuilt material design themes or set up an extensible custom theme.
Set up global Angular Material typography styles:

Whether to apply the global typography styles to your application.
Set up browser animations for Angular Material:

Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Subsequently, include the material pre-built theme’s CSS inside the src/styles.scss:

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Register MatTabsModule in App Module

Angular Material is a comprehensive library which offers tons of UI components. Similarly, every component needs to be imported to take its benefit. Further, we will import the MatTabsModule in angular’s main app module.

Hence, open app.module.ts file and update the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatTabsModule} from '@angular/material/tabs';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTabsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

You can check out the complete list of angular material tabs APIs here.

Implement Basic Material Tabs in Angular

The mat-tab-group directive is a wrapper around mat-tab directive; the mat-tab is the panel which forms the angular material tab. The following code invokes the simple material tab with four panels.

Open app.component.html template and insert the below code, however you can place the tab code in any angular HTML template:

<mat-tab-group>
  <mat-tab label="First"> Tab Panel 1 </mat-tab>
  <mat-tab label="Second"> Tab Panel 2 </mat-tab>
  <mat-tab label="Third"> Tab Panel 3 </mat-tab>
  <mat-tab label="Four"> Tab Panel 4 </mat-tab>
</mat-tab-group>

Afterwards, you can see the following tabs in action on the browser:

Integrate Angular Material Tabs in Angular

Adjust Tabs Animation

Material tabs come with default animation speed; nevertheless, you can adjust the tabs’ animation-duration using the animationDuration property.

<mat-tab-group animationDuration="150ms">
   ...
   ...
   ...
   ...
</mat-tab-group>

Disabling Material Tab

If you want, you can disable the tab panel using the disabled true property. Similarly, the below code example tells you how to disable tab pane one and four.

<mat-tab-group animationDuration="150ms">
  <mat-tab label="First" disabled="true"> Tab Panel 1 </mat-tab>
  ...
  ...
  <mat-tab label="Four" disabled="true"> Tab Panel 4 </mat-tab>
</mat-tab-group>

Create Custom Tab Template with NgTemplate

Sometimes you require to add a custom template within the mat-tab component, for formulating the custom template you can rely on NgTemplate just bind it with MatTabLabel directive.

<mat-tab-group animationDuration="150ms">

  <mat-tab>
    <ng-template mat-tab-label>
      <span style="font-size: 22px; color:blue">
        Tab Panel 1
      </span>
    </ng-template>

    The first tab in action :)
  </mat-tab>

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

Change Tab Header Position

Changing a tab header position is effortless in angular material you have to define the headerPosition property with the mat-tab-group directive as shown in below example:

<mat-tab-group headerPosition="below">
  ...
  ...
  ...
</mat-tab-group>

Make Material Tab Active

The selectedIndex property sets the active tab; it works on the index number pattern. It needs to be added to the mat-tab-group element. In the following example, we have declared the active variable with numeric value 0 in the angular template.

<mat-tab-group [selectedIndex]="active">
  <mat-tab label="First"> Tab Panel 1 </mat-tab>
  <mat-tab label="Second"> Tab Panel 2 </mat-tab>
  <mat-tab label="Third"> Tab Panel 3 </mat-tab>
</mat-tab-group>

You have to define the active tab index variable in the angular TypeScript template:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  active = 0;

}

Add Change Event in Material Tab

To set the change event in the tab, we are attaching the selectedIndexChange event to mat-tab-group directive. The onTabChange event will fire when the change occurs in tab manually or with index prop.

<mat-tab-group [selectedIndex]="active" (selectedIndexChange)="onTabChange($event)">
  <mat-tab label="First"> Tab Panel 1 </mat-tab>
  <mat-tab label="Second"> Tab Panel 2 </mat-tab>
  <mat-tab label="Third"> Tab Panel 3 </mat-tab>
</mat-tab-group>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  active = 0;

  onTabChange(e) {
    console.log(e)
  }

}

Test Angular Material Tab Component

You need to run the angular development server to test the material tab features we just built:

ng serve --o

Conclusion

Eventually, this angular material tabs tutorial is over in this excellent tutorial we learned how to add tabs in an angular application using the angular material library from scratch.

Not just that we also focused on setting up a material library in angular, adding a simple tab in angular, adding active index in tabs, adding change event in tabs, handling animation speed and creating a custom template in tabs.