CODEWITHSUNDEEP
angularangular2-routing
ArunK
ArunK

Reputation: 67

angular2 show hide contents of header based on user roles

New to angular2, My app.component.html looks something like this-

<nav *ngIf="rolesArr.length>0" >
<ul>
  <li>
    <a routerLink="home" class="sectionLink">Home</a>
  </li>
  <li>
    <a routerLink="manage" class="sectionLink">manage</a>
  </li>
  <li>
    <a routerLink="setting" class="sectionLink">setting</a>
  </li>
</nav>
<router-outlet></router-outlet>

 <footer> ... </footer>

and here is app.component.ts-

export class AppComponent {

  rolesArr: string[];

  constructor(private ps: PostsService, private roleS: Roles) {
    this.rolesArr = roleS.getUserRoles();
  }

}

So I am using angular routing to navigate between links. including login. so this nav header and footer loads initially with login window. and as user is not logged in value of string array rolesArr is empty. that means no tabs. which is ok.

but when user successfully logged in and move to another component, content of changes. and string array rolesArr gets something too.

but i need to change the view of tabs on header based on logged in user roles. like if array contains admin role all will show. on user role only first tab will show.

Upvotes: 2

Views: 1780

Answers (2)

Prerna Shukla
Prerna Shukla

Reputation: 113

It can be achieved by @Output and shared service.

Create a service to emit header change event :

import { Injectable , Output, EventEmitter } from '@angular/core';

@Injectable()
export class EventEmitterService {
  @Output() refreshTopHeaderMenuEventEmitter: EventEmitter<any> = new EventEmitter();

  public emitTopHeaderMenuUpdatedEvent(parameters) {
    this.refreshTopHeaderMenuEventEmitter.emit(parameters);
  }

  public getRefreshTopHeaderMenuEventEmitter() {
     return this.refreshTopHeaderMenuEventEmitter;
  }
}

In app component :

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import { EventEmitterService } from './event-emitter.service';

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

  constructor(public _eventEmitterService: EventEmitterService) { }

ngOnInit() {  
this._eventEmitterService.getRefreshTopHeaderMenuEventEmitter().subscribe(callBack => {
        console.log('refresh header');
    });
  }
}

Change header from inner component:

import { Component, OnInit } from '@angular/core';
import { EventEmitterService } from './event-emitter.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

  constructor(public _eventEmitterService: EventEmitterService) { }

  ngOnInit() {    }

  changeHeader(){
     this._eventEmitterService.emitTopHeaderMenuUpdatedEvent(false);
  }
}

Explanation :

  1. You need to create a service EventEmitterService which contains an object of EventEmitter refreshTopHeaderMenuEventEmitter which is accessible from child components.

  2. In AppComponent, getRefreshTopHeaderMenuEventEmitter() will return the EventEmitter object.

  3. Whenever we need to refresh the header, we can set this event object from child by emitTopHeaderMenuUpdatedEvent() of shared service as shown above and header will be refreshed.

Upvotes: 2

j.k
j.k

Reputation: 463

You want to look at template binding. Please consider ngSwitch and ngIf to handle this sort of thing. For your example of an administrator role, you'll want to look at your roles array to determine if the admin role is present, maybe using

rolesArr.indexOf('admin') !== -1

Using that 'truthy' statement, you're going to one of many attribute directives like those linked above or [hidden] in order to determine what displays and doesn't display on your template based on admin being one of the current roles for the user.

Upvotes: 0

Related Questions