Angular 6 dynamic Navigation Bar – add/remove Route dynamically

angular-6-dynamic-navbar-feature-image

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

Example Overview

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

angular-6-dynamic-route-add-remove-route-navbar-result-1

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

angular-6-dynamic-route-add-remove-route-navbar-result-2

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

angular-6-dynamic-route-add-remove-route-navbar-result-3

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

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

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):

Dynamic Navbar

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

Then show the links Array on the template:

Add/Remove Route dynamically

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

Practice

Project Structure

angular-6-dynamic-route-add-remove-route-navbar-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

Config Components for dynamic Routes

app.module.ts

Service for updating Navbar

Run command: ng g s services/navbar.

navbar.service.ts

Parent Component displaying Navbar

app.component.ts

app.component.html

Login Components

login.component.ts

login.component.html

Source Code

AngularDynamicRoutes

By grokonez | October 10, 2018.



Related Posts


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

  1. 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?

Got Something To Say:

Your email address will not be published. Required fields are marked *

*