Angular Material 8/9/10 Tabs Tutorial with Example

Last updated on by Digamber
In this tutorial, we will learn how to create Angular 8/9/10 Tabs using Angular Material Tabs component. To build Tabs in Angular 8/9/10, 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 ]

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>
Finally, we are done with Angular Material 8/9/10 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.