Angular Material Tab with Routing
March 22, 2021
Angular Material provides mat-tab-nav-bar
and mat-tab-link
to use Angular Material tabs with Angular routing.
mat-tab-nav-bar
The
mat-tab-nav-bar
is the selector of MatTabNav
directive. It is used for anchored navigation with animated ink bar. It has the properties such as 'backgroundColor', 'color', 'disablePagination', 'disableRipple'. The 'disablePagination', 'disableRipple' are Boolean. The mat-tab-nav-bar
is used as an attribute of <nav>
element.
<nav mat-tab-nav-bar >
The
mat-tab-link
is the selector of MatTabLink
directive. It is used for a link inside <nav>
element. It has Boolean properties such as 'active', 'disableRipple', 'disabled'. The mat-tab-link
can be used as an attribute of anchor tag.
<a mat-tab-link routerLink="/home" routerLinkActive="active-link">Home</a>
To use
mat-tab-nav-bar
and mat-tab-link
, we need to import below module.
import { MatTabsModule } from '@angular/material/tabs';
Technologies Used
Find the technologies being used in our example.1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0
Using mat-tab-nav-bar
and mat-tab-link
Find the sample code to use mat-tab-nav-bar
and mat-tab-link
.
app.component.html
<nav mat-tab-nav-bar ngClass = "tabs"> <a mat-tab-link routerLink="/home" routerLinkActive="active-link">Home</a> <a mat-tab-link routerLink="/add-book" routerLinkActive="active-link">Add Book</a> <a mat-tab-link routerLink="/manage-book" routerLinkActive="active-link">Manage Book</a> </nav> <div> <router-outlet></router-outlet> </div>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
.tabs { display: inline-block; background-color: #eee; border-radius: 4px; margin-top: 1em; } .active-link { color: #F20B22; }
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AddBookComponent } from './add-book/add-book.component'; import { ManageBookComponent } from './manage-book/manage-book.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'add-book', component: AddBookComponent }, { path: 'manage-book', component: ManageBookComponent }, ------ ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule{ }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { MatTabsModule } from '@angular/material/tabs'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ imports: [ BrowserModule, FormsModule, MatTabsModule, AppRoutingModule, ], declarations: [ AppComponent ------ ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
