The last layout component that we are going to learn about is tabs. Angular Material provides a module called MatTabsModule, which provides the <mat-tab-group> and <mat-tab> directives so that we can easily create a tabs component in our application. Take a look at the following sample code:

<mat-card class="z-depth" >
 <mat-card-title>Material Tabs</mat-card-title>
 <mat-card-content>
 <mat-tab-group>
 <mat-tab label="Personal"> This is a Personal Tab </mat-tab>
 <mat-tab label="Professional"> This is a Professional tab </mat-tab>
 <mat-tab label="Contact"> This is Contacts Tab </mat-tab>
</mat-tab-group>
</mat-card-content>
</mat-card>

In the preceding code, we used the <mat-tab-group> wrapper directive, and inside this, we use the <mat-tab> directive for each specific tab. Each tab will have a label that will be displayed at the top of the tab. Inside <mat-tab>, we will display the content of each tab. Take a look at the output of the preceding code in the following screenshot:

In the next section, we will learn about Angular Material forms. Read on.