Angular Material Tab Label
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';
<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'.
Contents
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>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
ngOnInit() {
}
}
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.
