Angular Material 11 Tabs Tutorial with Example

Let us understand what a Tab is?

The Tab is a user interface component, It is used to group multiple documents in a single window, and a user can switch between multiple tabs or as per the document required to be opened currently.

Creating a Tab in Angular is not a difficult task, we will build a basic Angular app with Angular Material UI library. Then we will import MatTabsModule directive from ‘@angular/material/tabs’ to make the Angular tabs work in our app.

Step 1: Install Angular App

Install and configure the Angular Material.

ng new angular-material-tabs

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS

Head over to the project directory.

cd angular-material-tabs

Step 2: Setup Angular Material 8 in Angular App

Run the command to install the Angular Material 8 UI library in Angular 8/9 Tabs project:

ng add @angular/material

Select Angular Material Pre-built Theme:

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]

Select Yes for including Angular Material Typography and Animations packages.

# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes

Check out the full Angular Material 8 documentation here.

Step 3: Custom Angular Material Module File

Create a custom angular-material.module.ts file, here in this file we can import all the Angular Material 10 UI components which can help you build a full-fledge app with Material design.

But if you want you can import MatTabsModule directive only from Angular Material UI library.

Go to angular-material.module.ts file and add the following code.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { OverlayModule } from '@angular/cdk/overlay';
import { CdkTreeModule } from '@angular/cdk/tree';
import { PortalModule } from '@angular/cdk/portal';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatRippleModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTreeModule } from '@angular/material/tree';
import { MatBadgeModule } from '@angular/material/badge';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatRadioModule } from '@angular/material/radio';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatTooltipModule } from '@angular/material/tooltip';


const materialModules = [
  CdkTreeModule,
  MatAutocompleteModule,
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDividerModule,
  MatExpansionModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatFormFieldModule,
  MatButtonToggleModule,
  MatTreeModule,
  OverlayModule,
  PortalModule,
  MatBadgeModule,
  MatGridListModule,
  MatRadioModule,
  MatDatepickerModule,
  MatTooltipModule
];

@NgModule({
  imports: [
    CommonModule,
    ...materialModules
  ],
  exports: [
    ...materialModules
  ],
})

export class AngularMaterialModule { }

Step 4: Create Angular 8/9 Tabs using Angular Material Tabs Component

Let us create simple Tabs using Angular and Material Design UI library, follow the given below process.

Add code in app.component.ts file.

<mat-tab-group>
  <mat-tab label="First">View 1</mat-tab>
  <mat-tab label="Second">View 2</mat-tab>
  <mat-tab label="Third">View 3</mat-tab>
</mat-tab-group>

As you can see we have used the <mat-tab-group> tag to show material 8 tabs demo in our app.

Start App

Run the command to check out the Angular 8|9|10 Tabs demo on the browser: http://localhost:4200

ng serve --open

Manage Angular Tab Animation

Managing tabs animation speed is pretty easy, we can use animationDuration input to control the animation speed for the tabs in Angular 8/9.

<mat-tab-group animationDuration="100ms">
  <mat-tab label="First">View 1</mat-tab>
  <mat-tab label="Second">View 2</mat-tab>
  <mat-tab label="Third">View 3</mat-tab>
</mat-tab-group>

Disable Angular 8/9 Tabs Animation

Disabling the tab animation speed is also very easy, just set the animation speed to 0ms:

<mat-tab-group animationDuration="0ms">
  <mat-tab label="First">View 1</mat-tab>
  <mat-tab label="Second">View 2</mat-tab>
  <mat-tab label="Third">View 3</mat-tab>
</mat-tab-group>