Angular Material Tab Label

By Arvind Rai, March 16, 2021

A Tab is used to organize content into separate view and at one time only one view is visible. Each Tab's header will be visible irrespective of selected Tab. Angular Material provides MatTab directive with selector mat-tab to create tabs. It also provides MatTabGroup directive with selector mat-tab-group to group tabs.
To work with Angular Material Tabs in our application, we need to import below module.

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

The attributes of <mat-tab> are 'disabled', 'label', 'aria-label', 'aria-labelledby'.
The attributes of <mat-tab-group> are 'animationDuration', 'backgroundColor', 'color', 'disablePagination', 'disableRipple', 'dynamicHeight', 'headerPosition', 'selectedIndex'. The events for <mat-tab-group> are 'animationDone', 'focusChange', 'selectedIndexChange', 'selectedTabChange'.

Technologies Used
Using label Attribute with <mat-tab>
Using mat-tab-label Attribute
Label with <mat-icon>
<mat-tab-group> Attributes : backgroundColor and color
Width, Height and Color using Styles
Complete Example
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0

Using `label` Attribute with `<mat-tab>`

The label is an attribute of <mat-tab>. It is used to show labels in tabs as following.

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

Using `mat-tab-label` Attribute

The mat-tab-label is the selector of MatTabLabel directive. Find the code to use it.

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label> Tab One </ng-template>
    Content for Tab 1
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label> Tab Two </ng-template>
    Content for Tab 2
  </mat-tab>  
</mat-tab-group>

Label with `<mat-icon>`

For icon as tab label, use <mat-icon> with mat-tab-label as given below.

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>book</mat-icon>
      Tab One
    </ng-template>
    Content for Tab 1
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>cloud</mat-icon>
      Tab Two
    </ng-template>
    Content for Tab 2
  </mat-tab>
</mat-tab-group>

`<mat-tab-group>` Attributes : backgroundColor and color

The mat-tab-group has following attributes to assign the tab color.
backgroundColor: Background color of the tab group.
color: Underline color for active tab.
The theme colors that can be assigned to above both attributes are 'primary', 'accent' and 'warn'.

<mat-tab-group backgroundColor="primary" color="warn">
  <mat-tab label="Tab One"> Content for Tab 1 </mat-tab>
  <mat-tab label="Tab Two"> Content for Tab 2 </mat-tab>
</mat-tab-group>

Width, Height and Color using Styles

To handle width, height, color and other CSS attributes for tabs, use CSS code as following.

.mat-tab-label{
  background:aqua;
  color: blue;
  width: 60px;
  height: 50px;
  font-size: 20px;
}
.mat-tab-group.mat-primary .mat-ink-bar{
  background: brown;
  height: 5px;
}

Complete Example

app.component.html

<h3>With label</h3>

<mat-tab-group backgroundColor="primary" color="warn">
  <mat-tab label="Tab One"> Content for Tab 1 </mat-tab>
  <mat-tab label="Tab Two"> Content for Tab 2 </mat-tab>
</mat-tab-group>

<h3>With mat-tab-label</h3>

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label> Tab One </ng-template>
    Content for Tab 1
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label> Tab Two </ng-template>
    Content for Tab 2
  </mat-tab>
</mat-tab-group>

<h3>With mat-icon</h3>

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>book</mat-icon>
      Tab One
    </ng-template>
    Content for Tab 1
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>cloud</mat-icon>
      Tab Two
    </ng-template>
    Content for Tab 2
  </mat-tab>
</mat-tab-group>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTabsModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.