CODEWITHSUNDEEP
angularangular-ui-routerangular5navbarangular-route-segment
dEs12ZER
dEs12ZER

Reputation: 848

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;
  }
}

Upvotes: 2

Views: 4236

Answers (1)

Klaas Cuvelier
Klaas Cuvelier

Reputation: 301

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>

Upvotes: 1

Related Questions