Angular Material 13 Tabs Tutorial with Example
Let us understand what a Tab is?
The Tab is a user interface component, It is used to group multiple documents in a single window, and a user can switch between multiple tabs or as per the document required to be opened currently.
Creating a Tab in Angular is not a difficult task, we will build a basic Angular app with Angular Material UI library. Then we will import MatTabsModule
directive from ‘@angular/material/tabs’ to make the Angular tabs work in our app.
Table of Contents
Step 1: Install Angular App
Install and configure the Angular Material.
ng new angular-material-tabs
# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS
Head over to the project directory.
cd angular-material-tabs
Step 2: Setup Angular Material 8 in Angular App
Run the command to install the Angular Material 8 UI library in Angular 8/9 Tabs project:
ng add @angular/material
Select Angular Material Pre-built Theme:
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
❯ Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
Purple/Green [ Preview: https://material.angular.io?theme=purple-green ]
Select Yes for including Angular Material Typography and Animations packages.
# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes
Check out the full Angular Material 8 documentation here.
Step 3: Custom Angular Material Module File
Create a custom angular-material.module.ts file, here in this file we can import all the Angular Material 10 UI components which can help you build a full-fledge app with Material design.
But if you want you can import MatTabsModule directive only from Angular Material UI library.
Go to angular-material.module.ts file and add the following code.
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { OverlayModule } from '@angular/cdk/overlay';
import { CdkTreeModule } from '@angular/cdk/tree';
import { PortalModule } from '@angular/cdk/portal';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatRippleModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTreeModule } from '@angular/material/tree';
import { MatBadgeModule } from '@angular/material/badge';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatRadioModule } from '@angular/material/radio';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatTooltipModule } from '@angular/material/tooltip';
const materialModules = [
CdkTreeModule,
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDividerModule,
MatExpansionModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatProgressSpinnerModule,
MatPaginatorModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatFormFieldModule,
MatButtonToggleModule,
MatTreeModule,
OverlayModule,
PortalModule,
MatBadgeModule,
MatGridListModule,
MatRadioModule,
MatDatepickerModule,
MatTooltipModule
];
@NgModule({
imports: [
CommonModule,
...materialModules
],
exports: [
...materialModules
],
})
export class AngularMaterialModule { }
Step 4: Create Angular 8/9 Tabs using Angular Material Tabs Component
Let us create simple Tabs using Angular and Material Design UI library, follow the given below process.
Add code in app.component.ts file.
<mat-tab-group>
<mat-tab label="First">View 1</mat-tab>
<mat-tab label="Second">View 2</mat-tab>
<mat-tab label="Third">View 3</mat-tab>
</mat-tab-group>
As you can see we have used the <mat-tab-group>
tag to show material 8 tabs demo in our app.
Start App
Run the command to check out the Angular 8|9|10 Tabs demo on the browser: http://localhost:4200
ng serve --open
Manage Angular Tab Animation
Managing tabs animation speed is pretty easy, we can use animationDuration
input to control the animation speed for the tabs in Angular 8/9.
<mat-tab-group animationDuration="100ms">
<mat-tab label="First">View 1</mat-tab>
<mat-tab label="Second">View 2</mat-tab>
<mat-tab label="Third">View 3</mat-tab>
</mat-tab-group>
Disable Angular 8/9 Tabs Animation
Disabling the tab animation speed is also very easy, just set the animation speed to 0ms
:
<mat-tab-group animationDuration="0ms">
<mat-tab label="First">View 1</mat-tab>
<mat-tab label="Second">View 2</mat-tab>
<mat-tab label="Third">View 3</mat-tab>
</mat-tab-group>