How to Create Tabs with Animation in Angular
![](/images/code-with-jacob-profile-pic-teal-small.jpg)
Jacob Naryan - Full-Stack Developer
Posted: Sat Jul 22 2023
Last updated: Wed Nov 22 2023
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.
Thanks for reading, please consider tipping some BTC if you liked the blog!
Click or scan the QR code below.
![bitcoin address for tips if you are so inclined.](/images/bitcoin-address.png)