Angular Material 8/9 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 ]

# Set up HammerJS for gesture recognition? (Y/n) = Y
# ? Set up browser animations for Angular Material? (Y/n) = Y

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 various Angular material ui components in future if required. But for now we will import MatTabsModule directive from Angular Material UI library.

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

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


@NgModule({
    imports: [MatTabsModule],
    exports: [MatTabsModule]
})

export class AngularMaterialModule { }

Import Angular Material module file inside the app.module.ts file.

/* Angular material */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [...],
  imports: [
    BrowserAnimationsModule,
    AngularMaterialModule,
  ],
  providers: [...],
  bootstrap: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

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.

app.component.ts

<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.

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

$ ng serve

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>

GitHub Repo