Angular Material Tabs tutorial, In this detailed likewise the profound tutorial we will share with you how to add tabs in an angular application using the angular material library.
Plus, you will also learn how to add an active tab, set change event, change tab header position and create and implement the custom template in tabs.
Angular Material is an immaculate user-friendly library for creating beautiful user interface components. In this tutorial, we will discuss the one such component, which is tab.
Tabs are useful for displaying multiple contents in a single view. Tabs is a collection of numerous panels, in tabs, only the single panel is visible in screen’s view, you can enable the view of tabs by clicking on the tabs navigation.
Angular Material 13 Tabs Integration Example
Here are the steps towards integrating tabs in angular, therefore let’s start implementing the tabs in angular app:
- Step 1: Create Angular Project
- Step 2: Install Angular Material Package
- Step 3: Import MatTabsModule in AppModule
- Step 4: Implement Basic Material Tabs in Angular
- Step 5: Enable Animation in Tab
- Step 6: Disabling Material Tab
- Step 7: Create Custom Tab Template with NgTemplate
- Step 8: Change Tab Header Position
- Step 8: Make Material Tab Active
- Step 10: Add Change Event in Material Tab
- Step 11: Test Angular Material Tab Component
Create Angular Project
This is the foundational step of this tutorial; it will teach you to install a new angular app using the angular cli tool:
ng new ng-material-tab
Move inside the project root:
cd ng-material-tab
Disable Strict Angular TypeStrict Errors
The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false
, "noImplicitReturns": false
and "strictTemplates": false
inside the compilerOptions and angularCompilerOptions in tsconfig.json file.
Install Angular Material Package
Next, you have to run the following command to install the angular material library in the angular app:
ng add @angular/material
-
Choose a prebuilt theme name or “custom” for a custom theme:
You can choose from prebuilt material design themes or set up an extensible custom theme.
-
Set up global Angular Material typography styles:
Whether to apply the global typography styles to your application.
-
Set up browser animations for Angular Material:
Importing the
BrowserAnimationsModule
into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.
Subsequently, include the material pre-built theme’s CSS inside the src/styles.scss:
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Register MatTabsModule in App Module
Angular Material is a comprehensive library which offers tons of UI components. Similarly, every component needs to be imported to take its benefit. Further, we will import the MatTabsModule in angular’s main app module.
Hence, open app.module.ts file and update the following code:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTabsModule} from '@angular/material/tabs';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatTabsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
You can check out the complete list of angular material tabs APIs here.
Implement Basic Material Tabs in Angular
The mat-tab-group directive is a wrapper around mat-tab directive; the mat-tab is the panel which forms the angular material tab. The following code invokes the simple material tab with four panels.
Open app.component.html template and insert the below code, however you can place the tab code in any angular HTML template:
<mat-tab-group>
<mat-tab label="First"> Tab Panel 1 </mat-tab>
<mat-tab label="Second"> Tab Panel 2 </mat-tab>
<mat-tab label="Third"> Tab Panel 3 </mat-tab>
<mat-tab label="Four"> Tab Panel 4 </mat-tab>
</mat-tab-group>
Afterwards, you can see the following tabs in action on the browser:
Adjust Tabs Animation
Material tabs come with default animation speed; nevertheless, you can adjust the tabs’ animation-duration using the animationDuration property.
<mat-tab-group animationDuration="150ms">
...
...
...
...
</mat-tab-group>
Disabling Material Tab
If you want, you can disable the tab panel using the disabled true property. Similarly, the below code example tells you how to disable tab pane one and four.
<mat-tab-group animationDuration="150ms">
<mat-tab label="First" disabled="true"> Tab Panel 1 </mat-tab>
...
...
<mat-tab label="Four" disabled="true"> Tab Panel 4 </mat-tab>
</mat-tab-group>
Create Custom Tab Template with NgTemplate
Sometimes you require to add a custom template within the mat-tab component, for formulating the custom template you can rely on NgTemplate just bind it with MatTabLabel directive.
<mat-tab-group animationDuration="150ms">
<mat-tab>
<ng-template mat-tab-label>
<span style="font-size: 22px; color:blue">
Tab Panel 1
</span>
</ng-template>
The first tab in action :)
</mat-tab>
...
...
...
</mat-tab-group>
Change Tab Header Position
Changing a tab header position is effortless in angular material you have to define the headerPosition property with the mat-tab-group directive as shown in below example:
<mat-tab-group headerPosition="below">
...
...
...
</mat-tab-group>
Make Material Tab Active
The selectedIndex property sets the active tab; it works on the index number pattern. It needs to be added to the mat-tab-group element. In the following example, we have declared the active variable with numeric value 0 in the angular template.
<mat-tab-group [selectedIndex]="active">
<mat-tab label="First"> Tab Panel 1 </mat-tab>
<mat-tab label="Second"> Tab Panel 2 </mat-tab>
<mat-tab label="Third"> Tab Panel 3 </mat-tab>
</mat-tab-group>
You have to define the active tab index variable in the angular TypeScript template:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
active = 0;
}
Add Change Event in Material Tab
To set the change event in the tab, we are attaching the selectedIndexChange
event to mat-tab-group directive. The onTabChange event will fire when the change occurs in tab manually or with index prop.
<mat-tab-group [selectedIndex]="active" (selectedIndexChange)="onTabChange($event)">
<mat-tab label="First"> Tab Panel 1 </mat-tab>
<mat-tab label="Second"> Tab Panel 2 </mat-tab>
<mat-tab label="Third"> Tab Panel 3 </mat-tab>
</mat-tab-group>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
active = 0;
onTabChange(e) {
console.log(e)
}
}
Test Angular Material Tab Component
You need to run the angular development server to test the material tab features we just built:
ng serve --o
Conclusion
Eventually, this angular material tabs tutorial is over in this excellent tutorial we learned how to add tabs in an angular application using the angular material library from scratch.
Not just that we also focused on setting up a material library in angular, adding a simple tab in angular, adding active index in tabs, adding change event in tabs, handling animation speed and creating a custom template in tabs.