Angular 6 access control using ngx-permission

Angular 6 access control using ngx-permission:

We can’t see any enterprise applications without access control management as this is the most important feature which all the sites must have to avoid security violations and control the views for different user groups.

In angular this can be easily achieved using ngx-permission, I personally used it in my application developments and did not face any issues so far, and even if you face any issues developer is so active to respond as quick as possible.

1. Install ngx-permission

npm install ngx-permissions --save


2. Import into Main Module (app.module)

//Import your library
import { NgxPermissionsModule } from 'ngx-permissions';
import { HttpClientModule } from '@angular/common/http';

Import it:

imports: [

3. Import also into Lazy modules

import { NgxPermissionsModule } from "ngx-permissions";

And import:

imports: [



4. Import & configuration in your components (Main or sub components)

import { NgxPermissionsService } from "ngx-permissions";
import { HttpClient } from "@angular/common/http";


constructor(private permissionsService: NgxPermissionsService,
private http: HttpClient){



ngOnInit(): void {
const perm = ["EDITOR"];
this.http.get('url').subscribe((permissions) => {

url is the one which gets the roles from your backend application.



5. Control the access in your view:

<div class="nested-menu" *ngxPermissionsOnly="['ADMIN']">
<a class="list-group-item" (click)="addExpandClass('banner')"> <span><i
class="fa fa-image"></i>&nbsp;{{ 'Banner' | translate }}</span>

If your getting any other issues, have a look at this link.


Thanks for reading this article.

331 total views, 1 views today

About: Mirthbees

Blogger, Innovator, Developer and Enterpreneur. Founder of GuruRecharge, Readymade online recharge script. Lead Developer in