Angular 12 Material Tabs Tutorial with Example

Angular 12 Material Tabs Tutorial with Example; In this tutorial, we will learn how to implement tabs with the Angular Material library, We will use the MatTabsModule material modules to generate tabs with animations and some other important configuration

The Angular material UI components provide a Tab component to use tabs in angular, Tabs component organizes different content views at one area or one view and only one view can be visible at a time, the user can switch the views by clicking on the tabs header or label name

You can download the working example of the Angular 12 Material Tabs Tutorial https://github.com/technostuf/angular-material-tabs-example

Create a new Angular 12 app
Install Angular Material Library
Import the modules
Add code in the view file
Run an Angular 12 application

Step 1 – Create a new Angular 12 app

The first step is to open your terminal and execute the below command to create a new Angular 12 app. just copy the below command and paste in terminal

 ng new angular-material-tabs

Step 2 – Install Angular Material Library

To install the Angular Material Library in the Angular application using the below command

 ng add @angular/material

After running the above command, it will ask you to choose a material theme and select the theme, Angular Material offers the following pre-built themes deep-purple-amber, indigo-pink, purple-green, and pink-blue-grey, I choose an indigo-pink theme and we also need to import the theme CSS into our main style.css

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 3 – Import the modules

In this step, we’ll import MatTabsModule the app.module.ts file to make available thought out the project, This module is used to build tabs in our angular 12 application

Now open the src\app\app.module.ts file import the MatTabsModule in the module declaration section and add the module in the import array

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

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 { }

Step 4 – Add code in the view file

Open the src\app\app.component.html file and add the below code to create tabs with animation, animationDuration variable accept the animation-delay in milliseconds

<h3>Angular material tabs - technostuf.com</h3>
<mat-tab-group animationDuration="1000ms">
  <mat-tab label="Tab 1">Tab 1 Content</mat-tab>
  <mat-tab label="Tab 2">Tab 2 Content</mat-tab>
  <mat-tab label="Tab 3">Tab 3 Content</mat-tab>
</mat-tab-group>

Step 5 – Run an Angular 12 application

Execute the following command on the terminal and run the angular app

 ng serve

Angular 12 material tabs other useful settings

Using tabs with a custom label template, We can set custom icons in the tabs label, Open the src\app\app.component.html file to make this change

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Tab 1
    </ng-template>
    Tab 1 Content
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Tab 2
    </ng-template>
    Tab 2 Content
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Tab 3
    </ng-template>
    Tab 3 Content 3
  </mat-tab>
</mat-tab-group>

We also need to import the MatIconModule in app.module.ts to use the icons in the tabs header

You can download the working example of the Angular 12 Material Tabs Tutorial

https://github.com/technostuf/angular-material-tabs-example