Angular Material 8/9 Tabs Tutorial with Example

By Digamber Rawat Last updated on
In this tutorial, we will learn how to create Angular 8/9 Tabs using Angular Material Tabs component. To build Tabs in Angular 8/9, we will create a basic Angular app from scratch with material UI.

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>
Finally, we are done with Angular Material 8/9 Tabs Tutorial, if you liked this basic tutorial then please share it with others. If you wanna play with the code then click on the given below button to checkout the GitHub repo.

GitHub Repo

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.