Angular Material 13 Tabs Integration Tutorial Example

Angular Material 13 Tabs example. In this quick tutorial, you will learn how to simply create a Tabs component in the Angular 13 application with the help of Angular material user interface package.

A tab is a valuable User Interface component; It is used to display multiple contents in a single screen view. In general, Tabs has more than one panel.

One tab panel is visible at a time in the Tabs component, and each tab panel is viewable once at a time. A user can make a request to display data in a tab panel corresponding to the content in which data exists.

Angular Material library is a handy UI components library. It contains multiple UI components. You can use the materiala design library to rapidly increase the development of attractive, livery, and practical web components in web applications.

After using the material module in Angular, you won’t have to bother about the web design principles like browser compatibility and device autonomy.

How to Add Angular Material Tabs in Angular 13 Application

  • Step 1: Set Up Angular Project
  • Step 2: Install Angular Material Module
  • Step 3: Set Up Material Tooltip Module
  • Step 4: Create Simple Tabs Component
  • Step 5: Tabs Dynamic Height
  • Step 6: Tabs Lazy Loading
  • Step 7: Serve Angular App

Set Up Angular Project

Make sure to have a latest version of angular CLI added in your development system.

npm install -g @angular/cli

You need a new angular application to start the angular development; here is the command that will install a new app.

ng new ng-material-demo

Then, get inside the angular app:

cd ng-material-demo

Remove Strict TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Install Angular Material Module

You have to follow the given instructions to install the material module in the angular project:

ng add @angular/material

Select the given options from the terminal app:

  1. 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.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. 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.

Next, add the material’s prebuilt theme CSS in src/styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Set Up Material Tooltip Module

You need to import the MatTabsModule module in app module class, however we are going to create a src/material.module.ts and add the other essential material ui modules in this file.

It will be the efficient way to manage material modules in angular app.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
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 { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
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 { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
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 { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

In this step, you have to import the app/app.module.ts file.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

In this file we imported CUSTOM_ELEMENTS_SCHEMA, FormsModule, ReactiveFormsModule and MaterialModule modules from their respective library.

Create Simple Tabs Component

In this step, we will show you how to easily implement angular material tabs in Angular component.

Update given code in app.component.html file.

<h2>Angular Material Tabs Example</h2>

<mat-tab-group>
  <mat-tab label="Tab 1"> Tab 1 </mat-tab>
  <mat-tab label="Tab 2"> Tab 2 </mat-tab>
  <mat-tab label="Tab 3"> Tab 3 </mat-tab>
</mat-tab-group>

The mat-tab-group is the wrapper around the mat-tab directive; when you click on the tab navbar, the selectedTabChange output event is emitted. The label property is the text that uses the simple tab-group API.

Tabs Dynamic Height

Angular material tabs don’t change the height dynamically of their active tab. However, we can do this by adding the dynamicHeight to the mat-tab-group property.

It will animate its height as per the height of the currently active tab.

<h2>Angular Material Tabs with Dynamic Example</h2>

<mat-tab-group dynamicHeight>
  <mat-tab label="Tab 1"> Tab 1 </mat-tab>
  <mat-tab label="Tab 2"> Tab 2 </mat-tab>
  <mat-tab label="Tab 3"> Tab 3 </mat-tab>
</mat-tab-group>

Tabs Lazy Loading

We will show you how to add the lazy loading in Tabs, make sure to add the matTabContent to the ng-template attribute.

Update given code in app.component.html file.

<h2>Angular Material Lazy Loading Tabs Example</h2>

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      Data 1 - Loaded: {{ setLoadingTime(1) | date: "medium" }}
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      Data 2 - Loaded: {{ setLoadingTime(2) | date: "medium" }}
    </ng-template>
  </mat-tab>
  <mat-tab label="Third">
    <ng-template matTabContent>
      Data 3 - Loaded: {{ setLoadingTime(3) | date: "medium" }}
    </ng-template>
  </mat-tab>
</mat-tab-group>

Update given code in app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  loadTime: Date[] = [];

  setLoadingTime(index: number) {
    if (!this.loadTime[index]) {
      this.loadTime[index] = new Date();
    }

    return this.loadTime[index];
  }
}

Serve Angular App

Run the angular application with the help of the given below command.

ng serve

It will start the angular’s development server and open the app on the browser with given url:

http://localhost:4200

Angular Material 13 Tabs Integration Tutorial Example

Conclusion

We have understood the process of implementing the Tabs UI component in the Angular app. In this practical guide, we covered and highlighted all the things that will be useful for making the angular material tabs component in the angular ecosystem.

We would love to know what your thoughts are on how we can make this simple tab functionality more user-friendly and easier. You can checkout more examples of tab here.