Contents hide 1) View Component Based on User Role 1.1) How user role directive will work 2) User Role Service 3) Directive To Show and Hide Based on User Roles 4) Demo Code And Demo In this tutorial we will see how to Display or View Component Based on User Role In Angular 9. Not just a component also it can be applied to every element of the HTML. In any application with multiple user roles, you might face a scenario to show and hide the component or an element in the DOM to handle such a scenario we can create a directive like a *ngIf so letβs create it. Topics Component By User Role User Role Service (Optional) Create Directive To Show and Hide Demo View Component Based on User Role lets first understand how our directive will work with the templates. An application can be based on single or multiple user roles. so the directive will accept an array property in which multiple user roles can be defined. app.component.html <!-- Display only for Admin --> <app-some-component *ifRoles='["Admin"]'> ... </app-some-component> <!-- Display only for Admin & SuperAdmin --> <app-some-component *ifRoles='["Admin", "SuperAdmin"]'> ... </app-some-component> <!-- *ifRoles : using on HTML Elements --> <section *ifRoles='["User"]'> ... </section> How user role directive will work If the user has the proper role as mention in the directive selector then the component should be added in DOM. In case if the user is not having the proper role to view specific content then that component or an element should be removed from the DOM. It will behave similarly to *ngIf='true' or *ngIf='false' we use in angular. User Role Service For roles, we must have a service that gets us a user role list. To demonstrate I have used the www.jsonbin.io site to store some static data to make a demo work. https://api.jsonbin.io/b/5eca9addbbaf1f2589463bbf - (Dummy API for USer Roles) API Response { "roles": [ "Admin", "SuperAdmin", "User", "DataManager" ] } Directive To Show and Hide Based on User Roles letβs first generate a directive using angular CLI command Bash ng generate directive IfRoles and our directive will have something like this. ifRoles.directive.ts import { Input, OnInit, Directive, ViewContainerRef, TemplateRef, OnDestroy } from "@angular/core"; import { Subject, Subscription } from "rxjs"; import { takeUntil } from "rxjs/operators"; import { RolesService } from "../services/roles.service"; @Directive({ selector: '[ifRoles]' }) export class IfRolesDirective implements OnInit, OnDestroy { private subscription: Subscription[] = []; // the role the user must have @Input() public ifRoles: Array<string>; /** * @param {ViewContainerRef} viewContainerRef -- the location where we need to render the templateRef * @param {TemplateRef<any>} templateRef -- the templateRef to be potentially rendered * @param {RolesService} rolesService -- will give us access to the roles a user has */ constructor( private viewContainerRef: ViewContainerRef, private templateRef: TemplateRef<any>, private rolesService: RolesService ) {} public ngOnInit(): void { this.subscription.push( this.rolesService.roles().subscribe(res => { if (!res.roles) { // Remove element from DOM this.viewContainerRef.clear(); } // user Role are checked by a Roles mention in DOM const idx = res.roles.findIndex((element) => this.ifRoles.indexOf(element) !== -1); if (idx < 0) { this.viewContainerRef.clear(); } else { // appends the ref element to DOM this.viewContainerRef.createEmbeddedView(this.templateRef); } }) ); } /** * on destroy cancels the API if its fetching. */ public ngOnDestroy(): void { this.subscription.forEach((subscription: Subscription) => subscription.unsubscribe()); } } this.templateRef contains the DOM refrence inside the ifRoles selector. viewContainerRef.clear() will remove the content from the DOM if the user Roles is not matched. viewContainerRef.createEmbeddedView(templateRef) Will Append the DOM if the user roles is matched. Demo Get More tutorials on Angular 9+ Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular 7, angular-directives, templateRef