Angular Material 16 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
Remove Angular TypeScript Errors
Make sure to set following properties to false in tsconfig.json file:
"compilerOptions": {
...
...
"strict": false,
"noPropertyAccessFromIndexSignature": false,
...
...
},
"angularCompilerOptions": {
"strictTemplates": false
}
Step 2: Setup Angular Material in Angular App
Run the command to install the Angular Material UI library in Angular 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 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 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.html 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 tabs demo in our app.
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.
<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 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>
Start App
Run the command to check out the Angular Tabs demo on the browser: http://localhost:4200
ng serve --open
Conclusion
Angular Material Tabs is a component provided by the Angular Material library, a UI component framework for Angular applications.
The Tabs component allows you to create a tabbed interface, where each tab represents a separate content area.
Users can switch between tabs to view different sections of content without navigating to a new page.
Finally, we have learned how to implement with Angular Material Tabs in Angular application’s component.
if you liked this basic tutorial then please share it with others. If you wanna play with the code then click on the given below button to checkout the GitHub repo.