Angular Material Tab with Routing

By Arvind Rai, 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 >

mat-tab-link
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>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
}

app.component.css

.tabs {
    display: inline-block;
    background-color: #eee;
    border-radius: 4px;
    margin-top: 1em;
}
.active-link {
    color: #F20B22;
}

app-routing.module.ts

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{ }

app.module.ts

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.