How to Create Tabs with Animation in Angular

Tabs are a great way to organize content into different sections. The MatTabsModule in Angular Material is a user-friendly way to create tabs in Typescript with minimal coding. It helps you quickly add and switch between different views of your content. This tutorial will walk you through setting up and using the MatTabsModule with Angular Material in Typescript.

1. Install MatTabsModule

The first step to creating tabs with MatTabsModule is to install Angular Material. To do so, enter the following command in a terminal open to your root project directory

ng add @angular/material

This will install both the Angular Material, which will be necessary for creating your tabs.

2. Import MatTabsModule into Your App Module

Once you’ve installed the necessary packages, you’ll need to import the MatTabsModule into your app’s module file. Open your app’s module file (usually called app.module.ts) and add the following code:

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

 @NgModule({ 
     imports: [ 
         MatTabsModule, 
     ], 
 }) 
 export class AppModule { }

This will allow you to use the MatTabsModule in your app.

3. Add HTML for Tabs

To create tabs in your app, you’ll need to add HTML for them in your component’s template file (usually called componentname.component.html). Add the following code:

<mat-tab-group>   
   <mat-tab label="Tab 1">Content for Tab 1</mat-tab>   
   <mat-tab label="Tab 2">Content for Tab 2</mat-tab>   
   <mat-tab label="Tab 3">Content for Tab 3</mat-tab>   
</mat-tab-group>

This code creates a tab group with three different tabs that can be clicked on to switch between sections of content. You can adjust the label (what is displayed on each tab) and content (what is shown when a tab is clicked on) as necessary for your app.

Conclusion

You now know how to create tabs using the MatTabsModule with Angular Material and Typescript! This tutorial walked you through installing the necessary packages, importing them into your app module, and adding the MatTabs HTML to your component. With these steps, you should be able to quickly set up and use tabs in your next Angular project!

Thank you for reading. If you liked this blog check out more tutorials about software engineering here.