Angular Material 16 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

Remove Angular TypeScript Errors

Make sure to set following properties to false in tsconfig.json file:

"compilerOptions": {
 ...
 ...
   "strict": false,
   "noPropertyAccessFromIndexSignature": false,
 ...
 ...
},
  "angularCompilerOptions": {
    "strictTemplates": false
  }

Step 2: Setup Angular Material in Angular App

Run the command to install the Angular Material UI library in Angular 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 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 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.html 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 tabs demo in our app.

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.

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

Start App

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

ng serve --open

Conclusion

Angular Material Tabs is a component provided by the Angular Material library, a UI component framework for Angular applications.

The Tabs component allows you to create a tabbed interface, where each tab represents a separate content area.

Users can switch between tabs to view different sections of content without navigating to a new page.

Finally, we have learned how to implement with Angular Material Tabs in Angular application’s component.

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.