how to use different navbar for different type of user in Angular 5/4?


I’m working on a Angular5 free template that I found on github. It contains only one navbar but for my case I have 2 type of users (Admin and Manager) which do not have the same navbar at all. How can I resolve this? How can I redirect each one of them to a different navbar?

This is how the template looks like:

In this picture you can see the file app-sidebar-nav.component.html that uses the file _nav.ts which contains the navbar.

enter image description here

This is the file _nav.ts

enter image description here

I want to add another file called for exemple _nav2.ts that the manager will see after authentication, which is different. And the _nav.ts will be the result that the Admin will see after authentication.

In directory views/pages I have a file called login.component.ts and login.component.html


This is the file authentication.service.ts

export class AuthenticationService{

  private host:string="http://localhost:8080";
  private jwtToken=null ;
  private roles:Array<any>;
  private user:string;
  constructor(private http:HttpClient){


    return"/login",user,{observe: 'response'});


    return this.jwtToken;

    for(let r of this.roles){
      if(r.authority=='ADMIN') return true;}
    return false;

    for(let r of this.roles){
      if(r.authority=='MANAGER') return true;}
    return false;


You’ll have to add an input property userType that can be admin or manager on the AppSidebarNav class, change your imports a bit, like:

import {navigation as adminNav} from './../../_nav';
import {navigation as managerNav} from './../../_nav2';

And add a method in the class which returns the right info depending on the input:

class AppSidebarNav {
    @Input() userType = 'admin';

    get navItems(): any[] {
        return this.userType === 'admin' ? adminNav : managerNav;

Also update your nav template to use navItems instead of navigation (so it jumps into the new method).

Then you need to update the template where this app-sidebar-nav is included to add new userType property, like this:
<app-sidebar-nav [userType]="isAdmin ? 'admin' : 'manager'"></app-sidebar-nav>

Answered By – Klaas Cuvelier

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.