angularangular-ui-routerangular5navbarangular-route-segment

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

EDIT :

This is the file authentication.service.ts

@Injectable()
export class AuthenticationService{

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

  }
  login(user){

    return this.http.post(this.host+"/login",user,{observe: 'response'});

  }

  getToken(){
    return this.jwtToken;
  }

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

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

Solution

  • 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>