Angular Material Tabs with Router

Angular
Angular6, Material, Navigation, Routing

In this article, I will show you how to Use Angular Material Tab Component with Angular Routing. The Article is based on Angular 6.
We will Create small application using angular cli and will add needed component step by step.

Step 1: Create Angular 6 Project

Run the command in angular cli
1
ng new angular-material-tab-router

Step 2: Add Angular material to project

Run the command in angular cli
1
npm install --save @angular/material @angular/cdk @angular/animations

Step 3: Add Angular PreBuild Theme to project.

We will be using indigo-pink Theme.

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

Step 4: Add BrowserAnimationsModule

app.module.ts
1
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Step 5: Add Angular Material Toolbar & Tabs.

In the most situations, a Material toolbar will be placed at the top of your application and will only have a single row that includes the title of your application.

app.component.html
1
2
3
4
<mat-toolbar color="primary">
<span> Angular Material App With Tab and Routing </span>
<span class="example-fill-remaining-space"></span>  
</mat-toolbar>

Angular Material Tabs organize content into separate views where only one view can be visible at a time. Each tab’s label is shown in the tab header and the active tab’s label is designated with the animated ink bar. When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left and right across the labels.

app.component.html
1
2
3
4
5
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Add corresponding imports in app.module.ts

app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTabsModule} from '@angular/material/tabs';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

 imports: [
    BrowserModule,
    MatToolbarModule,
    MatTabsModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    
  ],

Now we have integrated Material MatTabsModule in our application. Start application
ng serve

Step 6: Add Routing module to application

An Angular best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.
By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

Run the command in angular cli
1
2
3
4
5
6
7
ng generate module app-routing --flat --module=app

//Also generate some test component using cli 
ng generate component componenet1
ng generate component componenet2
ng generate component componenet3

Step 7: Initialize and Add Routes

Routes tell the router which view to display when a user clicks a link or pastes a URL into the browser address bar.
A typical Angular Route has two properties:

  • Path: a string that matches the URL in the browser address bar.
  • Component: the component that the router should create when navigating to this route.

This is how the app-routing.module.ts will look like after adding routes.

app-routing.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { Componenet1Component } from './componenet1/componenet1.component';
import { Componenet2Component } from './componenet2/componenet2.component';
import { Componenet3Component } from './componenet3/componenet3.component';
const routes: Routes = [
  { path: '', redirectTo: '/first', pathMatch: 'full' },
  { path: 'first', component:  Componenet1Component},
  { path: 'second', component:  Componenet2Component},
  { path: 'third', component: Componenet3Component},
];
export const appRouting = RouterModule.forRoot(routes);
@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    CommonModule
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

Step 7 : Tabs and Navigation

While <mat-tab-group> is used to switch between views within a single route, <nav mat-tab-nav-bar> provides a tab-like UI for navigating between routes.
let’s update <mat-tab-group> to <nav mat-tab-nav-bar>

app.component.html
1
2
3
4
5
6
7
8
9
10
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">

</a>
</nav>
<router-outlet></router-outlet>

Setup navLinks
In the app.component.ts , I have initialized navLinks with a routeLinks array in the constructor. Also note that ngOnInit() function is responsible to maintaining Tab selection.

AppComponent.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { Component } from '@angular/core';
import {MatToolbarModule} from '@angular/material/toolbar';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-material-tab-router';  
  navLinks: any[];
  activeLinkIndex = -1; 
  constructor(private router: Router) {
    this.navLinks = [
        {
            label: 'First',
            link: './first',
            index: 0
        }, {
            label: 'Second',
            link: './second',
            index: 1
        }, {
            label: 'Third',
            link: './third',
            index: 2
        }, 
    ];
}
ngOnInit(): void {
  this.router.events.subscribe((res) => {
      this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
  });
}
}

Working application will look like below

References
Material Components
Angular

Github Link of Solution

Share Comments