Updated April 15, 2023
Introduction to Angular Material Tabs
In Angular material, tabs are present to show the content into different sections. These tabs increase the readability of the user and make the application more user interactive. We can have any number of tabs depending on the requirement we have, if we increase the number of tabs is greater than the length of the header then the scroll bar appears to let the user scroll and see all the tabs available for them. In Angular material in order to use the functionality of this tab, we need to make few configurations to the application by importing some modules or packages from the material library that we already have in place. Also, one more important point in the case of tabs is only one tab is active or we can have sat visibly to the user at a time, we can switch between the tabs we want just by simply clicking on them.
Syntax:
In this section we will have closer look at the syntax to create tabs in Angular material to make it easy for beginners, let’s get started;
<mat-tab-group mat-align-tabs="start">
<mat-tab label="your label">your Content</mat-tab>
<mat-tab label=""your label">your Content</mat-tab>
<mat-tab label=""your label">your Content </mat-tab>
</mat-tab-group>As you can see in the above syntax we have used ‘mat-tab-group’ and ‘mat-tab’ to create the tabs by using the angular material. these are the two important tags to be used in order to create a tab in angular. Let’s take a practice syntax for better understanding see below;
e.g. :
<mat-tab-group mat-align-tabs="start">
<mat-tab label="HELLO">I am hello</mat-tab>
<mat-tab label=""WORLD">I am world</mat-tab>
</mat-tab-group>How to Create Tabs in Angular Material?
As now we already know that tabs are used to represent the data in the different section, which make it more readable to the user. Also, it made users switch between the tabs anytime if they want. We can have any number of tabs on the page, depends on the requirement we have. It automatically adjusts the size by adding and providing the scroll bar to see all the tabs available. Let’s take a closer look at the configuration needed to use this inside our application see below;
1) MatTabsModule: If you want to implement tabs using angular material then we are required to import this package into our application, or we can say module. This module is the part of the material library, in order to use this, we should have material dependency included in our angular application. For reference have a look at the below code how we can use this inside our program see below;
e.g. :
import {MatTabsModule} from '@angular/material/tabs';Also do not forget to mention this module in the root module of your application.
2) This module ‘MatTabsModule’ comes up with two directives which help us to create the tab. This directive we can directly use on our template that is HTML page to create the tabs. Details information mentioned below;
a) mat-tab: This is used to care the tab we can have any number of this directly to represent our tabs on the UI.
b) mat-tab-group: This represents our tabs as a group, we can use this as the parent tag for ‘mat-tab’ which will combine all our tabs and show them on the UI in a proper format.
Below find the steps to create the angular material application;
1) First install the angular CLI which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;
e.g. :
npm install -g @angular/cli)The above command will install the CLI globally in our system hence we can use it globally when required.
2) Now in this step we will try to create the new angular project from scratch, this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your Command Prompt and press enter see below;
e.g. :
ng new your project name
ng new my-first-projectThis command will create the project with the name my-first-project, you can create your project with any name mentioned.
3) Just to make sure try one command which is mentioned below to install all the required library into our project,
e.g. :
npm install4) Now you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any error or bugs inside it.
e.g. :
ng serve5) go on browser and try to run the application with the below URL:
e.g. :
http://localhps:4200
By default, the angular project runs on the port 4200, you can change it as per your need if required.
6) Now everything is set we have our angular project now we will add the material library to our project just by running the below command on the command prompt;
e.g. :
ng add @angular/materialExample of Angular material tabs
1) Module code:
import {NgModule} from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
@NgModule({
exports: [
MatTabsModule
]
})
export class TabsDemoModule {}2) demo.tabs.component.ts Code :
import {Component} from '@angular/core';
/**
* @title Tab Group Demo
*/
@Component({
selector: 'tab-demo',
templateUrl: 'tab-demo.html',
styleUrls: ['tab-demo.css'],
})
export class TabDemoComponent {}3) Index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Tab Demo in Material</title>
</head>
<body class="mat-app-background">
<tab-demo>Loading...</tab-demo>
<span class="version-info">Current build: 12.1.0</span>
</body>
</html>4) demo.componenet.html code:
<h5><u><i>Tab demo using angular Material !!</i></u></h5>
<span>First group<span>
<mat-tab-group mat-align-tabs="start">
<mat-tab label="ONE">In first tab</mat-tab>
<mat-tab label="TWO">In second tab</mat-tab>
<mat-tab label="THREE">In third tab</mat-tab>
</mat-tab-group>
<span>Second group<span>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="CAR">I am car !!</mat-tab>
<mat-tab label="TRUCK">I am truck !!</mat-tab>
<mat-tab label="BUS">I am bus !!</mat-tab>
</mat-tab-group>
<span>Third group<span>
<mat-tab-group mat-align-tabs="end">
<mat-tab label="PERSON">I am person !!</mat-tab>
<mat-tab label="STUDENT">I am student !!</mat-tab>
<mat-tab label="EMPLOYEE">I am employee !!</mat-tab>
</mat-tab-group>Output:
Conclusion
As we have already seen this library makes our work very easy and handy because we do not need to maintain too much code, By just using simple directives we can implement the functionality with styling, follow the above steps to implement our first app using angular material.
Recommended Articles
We hope that this EDUCBA information on “Angular Material Tabs” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
