Angular 6 dynamic Navigation Bar - add/remove Route dynamically

In this tutorial, we’re gonna look at way to add/remove Route dynamically displaying with Navigation Bar.

Contents

Example Overview
How to add/remove Route dynamically
Practice
Source Code

Example Overview

Our App has a Navbar that shows Home and Login page at the beginning:

Right after logging in as a User or an Admin, the Navbar changes:
– remove Login page
– add User Board/Admin Board page
– add Logout button

Clicking on Logout button will change the Navbar to the beginning UI:

How to add/remove Route dynamically

Define Route

We define static Routes that will be display all the time. In this example, it’s the Route for Home page.

app-routing.module.ts

const routes: Routes = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

const routes: Routes = [

{

path: '',

redirectTo: '/home',

pathMatch: 'full'

{

path: 'home',

component: HomeComponent

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Configure Components for dynamic Routes

Routes to LoginComponent, AdminComponent and UserComponent will be dynamically add/remove into Navbar, so we define in entryComponents list so that these Components can be dynamically loaded into the view.

app.module.ts

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    AppRoutingModule
  ],
  entryComponents: [
    LoginComponent,
    UserComponent,
    AdminComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { AppRoutingModule } from './app-routing.module';

@NgModule({

declarations: [

...

imports: [

...

AppRoutingModule

entryComponents: [

LoginComponent,

UserComponent,

AdminComponent

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Add dynamic Routes

For Dynamic Routes that haven’t been defined in app-routing.module.ts, we add Route with necessary data ({path,component}) to config array using unshift() method (or push() method for the end of the Route[] array):

constructor(private router: Router) {
  this.router.config.unshift(
    { path: 'login', component: LoginComponent },
    { path: 'user', component: UserComponent },
    { path: 'admin', component: AdminComponent },
  );
}

constructor(private router: Router) {

this.router.config.unshift(

{ path: 'login', component: LoginComponent },

{ path: 'user', component: UserComponent },

{ path: 'admin', component: AdminComponent },

);

}

Dynamic Navbar

We need a list of available links to be modified in the future, so we declare an Array:

links: Array<{ text: string, path: string }>;

1	links: Array<{ text: string, path: string }>;

Then show the links Array on the template:

<ul class="nav navbar-nav" routerLinkActive="active">
  ...
  <li class="nav-item" *ngFor="let link of links">
    <a class="nav-link" [routerLink]="link.path">{{ link.text }}</a>
  </li>
</ul>

...

</li>

</ul>

Add/Remove Route dynamically

Now our work is simple. We just add/remove link to the links Array that we have created before:

// add new link
this.links.push({ text: 'Admin Board', path: 'admin' });

// remove existent link
this.links.forEach((link, index) => {
  if (link.text === 'Admin Board') {
    this.links.splice(index, 1);
  }
});

// add new link

this.links.push({ text: 'Admin Board', path: 'admin' });

// remove existent link

this.links.forEach((link, index) => {

if (link.text === 'Admin Board') {

this.links.splice(index, 1);

}

});

Practice

Project Structure

– define Routes in app-routing.module.ts
– 4 page Components for Routes: home, login, user, admin
– implement a service for manage Navbar items(links) and login status in navbar.service.ts
– config page Components for Routes in app.module.ts
– app.component.ts initializes dynamic Routes and app.component.html contains template for displaying dynamic Navbar.

Setup Project

– Create Angular Project:
ng new AngularDynamicRoutes

– Generate Page Components:
ng g c home
ng g c login
ng g c admin
ng g c user

Define Routes

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

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

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';

const routes: Routes = [

{

path: '',

redirectTo: '/home',

pathMatch: 'full'

{

path: 'home',

component: HomeComponent

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Config Components for dynamic Routes

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UserComponent,
    AdminComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  entryComponents: [
    LoginComponent,
    UserComponent,
    AdminComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

import { UserComponent } from './user/user.component';

import { AdminComponent } from './admin/admin.component';

import { LoginComponent } from './login/login.component';

@NgModule({

declarations: [

AppComponent,

HomeComponent,

UserComponent,

AdminComponent,

LoginComponent

imports: [

BrowserModule,

AppRoutingModule

entryComponents: [

LoginComponent,

UserComponent,

AdminComponent

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Service for updating Navbar

Run command: ng g s services/navbar.

navbar.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NavbarService {

  private links = new Array<{ text: string, path: string }>();
  private isLoggedIn = new Subject<boolean>();

  constructor() {
    this.addItem({ text: 'Login', path: 'login' });
    this.isLoggedIn.next(false);
  }

  getLinks() {
    return this.links;
  }

  getLoginStatus() {
    return this.isLoggedIn;
  }

  updateLoginStatus(status: boolean) {
    this.isLoggedIn.next(status);

    if (!status) {
      this.clearAllItems();
      this.addItem({ text: 'Login', path: 'login' });
    }
  }

  updateNavAfterAuth(role: string): void {
    this.removeItem({ text: 'Login' });

    if (role === 'user') {
      this.addItem({ text: 'User Board', path: 'user' });
    } else if (role === 'admin') {
      this.addItem({ text: 'Admin Board', path: 'admin' });
    }
  }

  addItem({ text, path }) {
    this.links.push({ text: text, path: path });
  }

  removeItem({ text }) {
    this.links.forEach((link, index) => {
      if (link.text === text) {
        this.links.splice(index, 1);
      }
    });
  }

  clearAllItems() {
    this.links.length = 0;
  }
}

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

import { Subject } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class NavbarService {

private links = new Array<{ text: string, path: string }>();

private isLoggedIn = new Subject<boolean>();

constructor() {

this.addItem({ text: 'Login', path: 'login' });

this.isLoggedIn.next(false);

}

getLinks() {

return this.links;

}

getLoginStatus() {

return this.isLoggedIn;

}

updateLoginStatus(status: boolean) {

this.isLoggedIn.next(status);

if (!status) {

this.clearAllItems();

this.addItem({ text: 'Login', path: 'login' });

}

updateNavAfterAuth(role: string): void {

this.removeItem({ text: 'Login' });

if (role === 'user') {

this.addItem({ text: 'User Board', path: 'user' });

} else if (role === 'admin') {

this.addItem({ text: 'Admin Board', path: 'admin' });

}

addItem({ text, path }) {

this.links.push({ text: text, path: path });

}

removeItem({ text }) {

this.links.forEach((link, index) => {

if (link.text === text) {

this.links.splice(index, 1);

}

});

}

clearAllItems() {

this.links.length = 0;

}

Parent Component displaying Navbar

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';
import { NavbarService } from './services/navbar.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  links: Array<{ text: string, path: string }>;
  isLoggedIn = false;

  constructor(private router: Router, private navbarService: NavbarService) {
    this.router.config.unshift(
      { path: 'login', component: LoginComponent },
      { path: 'user', component: UserComponent },
      { path: 'admin', component: AdminComponent },
    );
  }

  ngOnInit() {
    this.links = this.navbarService.getLinks();
    this.navbarService.getLoginStatus().subscribe(status => this.isLoggedIn = status);
  }

  logout() {
    this.navbarService.updateLoginStatus(false);
    this.router.navigate(['home']);
  }
}

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

import { Router } from '@angular/router';

import { UserComponent } from './user/user.component';

import { AdminComponent } from './admin/admin.component';

import { LoginComponent } from './login/login.component';

import { NavbarService } from './services/navbar.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

links: Array<{ text: string, path: string }>;

isLoggedIn = false;

constructor(private router: Router, private navbarService: NavbarService) {

this.router.config.unshift(

{ path: 'login', component: LoginComponent },

{ path: 'user', component: UserComponent },

{ path: 'admin', component: AdminComponent },

);

}

ngOnInit() {

this.links = this.navbarService.getLinks();

this.navbarService.getLoginStatus().subscribe(status => this.isLoggedIn = status);

}

logout() {

this.navbarService.updateLoginStatus(false);

this.router.navigate(['home']);

}

app.component.html

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">grokonez</a>
    </div>
    <ul class="nav navbar-nav" routerLinkActive="active">
      <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
      <li class="nav-item" *ngFor="let link of links">
        <a class="nav-link" [routerLink]="link.path">{{ link.text }}</a>
      </li>
      <li class="nav-item" *ngIf="isLoggedIn">
        <a class="nav-link" routerLink="logout" (click)="logout()">Logout</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

<a class="navbar-brand" href="#">grokonez</a>

</div>

</li>

<a class="nav-link" routerLink="logout" (click)="logout()">Logout</a>

</li>

</ul>

</div>

</nav>

<router-outlet></router-outlet>

</div>

Login Components

login.component.ts

import { Component, OnInit } from '@angular/core';
import { NavbarService } from '../services/navbar.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  isLoggedIn = false;
  role = '';

  constructor(private navbarService: NavbarService) {
    this.navbarService.getLoginStatus().subscribe(status => this.isLoggedIn = status);
  }

  ngOnInit() {
  }

  loginUser() {
    this.navbarService.updateNavAfterAuth('user');
    this.navbarService.updateLoginStatus(true);
    this.role = 'user';
  }

  loginAdmin() {
    this.navbarService.updateNavAfterAuth('admin');
    this.navbarService.updateLoginStatus(true);
    this.role = 'admin';
  }
}

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

import { NavbarService } from '../services/navbar.service';

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

isLoggedIn = false;

role = '';

constructor(private navbarService: NavbarService) {

this.navbarService.getLoginStatus().subscribe(status => this.isLoggedIn = status);

}

ngOnInit() {

}

loginUser() {

this.navbarService.updateNavAfterAuth('user');

this.navbarService.updateLoginStatus(true);

this.role = 'user';

}

loginAdmin() {

this.navbarService.updateNavAfterAuth('admin');

this.navbarService.updateLoginStatus(true);

this.role = 'admin';

}

login.component.html

<div *ngIf="isLoggedIn; else loggedOut">
  Logged in as {{role}}.
</div>

<ng-template #loggedOut>
  <button class="btn btn-secondary" (click)="loginUser()">Login as User</button>
  <button class="btn btn-primary" (click)="loginAdmin()">Login as Admin</button>
  <hr />
  <p>Don't have an account?</p>
  <a href="signup" class="btn btn-success">Sign Up</a>
</ng-template>

Logged in as {{role}}.

</div>

<ng-template #loggedOut>

<button class="btn btn-secondary" (click)="loginUser()">Login as User</button>

<button class="btn btn-primary" (click)="loginAdmin()">Login as Admin</button>

<hr />

<p>Don't have an account?</p>

</ng-template>

Source Code

AngularDynamicRoutes

By grokonez | October 10, 2018.

2 thoughts on “Angular 6 dynamic Navigation Bar – add/remove Route dynamically”

Mary User says:

November 21, 2018 at 2:32 am

I don’t understand why you need dynamic routing for this? Can’t you just hide/unhide whatever menu items you need based on login status?

Your components aren’t dynamic, you may as well declare them all in your app routing module?

Can you show an example which dynamically loads ‘About’, ‘Privacy’, ‘Terms’ page content e.g. from a database, using the same component?

1. grokonez says:
  
  November 21, 2018 at 12:56 pm
  
  Hi, you can simply do this with *ngIf 🙂 , the example is in this tutorial:
  Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack – Part 3: Build Frontend

Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Example Overview

How to add/remove Route dynamically

Define Route

Configure Components for dynamic Routes

Add dynamic Routes

Dynamic Navbar

Add/Remove Route dynamically

Practice

Project Structure

Setup Project

Define Routes

Config Components for dynamic Routes

Service for updating Navbar

Parent Component displaying Navbar

Login Components

Source Code

Post Tags

2 thoughts on “Angular 6 dynamic Navigation Bar – add/remove Route dynamically”

Got Something To Say: Cancel reply

Example Overview

How to add/remove Route dynamically

Define Route

Configure Components for dynamic Routes

Add dynamic Routes

Dynamic Navbar

Add/Remove Route dynamically

Practice

Project Structure

Setup Project

Define Routes

Config Components for dynamic Routes

Service for updating Navbar

Parent Component displaying Navbar

Login Components

Source Code

Related Posts

Post Tags

2 thoughts on “Angular 6 dynamic Navigation Bar – add/remove Route dynamically”

Got Something To Say: Cancel reply