Angular 5 Role Permission and Role Based Access Control

Angular 5 Role Permission and Role Based Access Control

Hi Guys Today Discuss Angular 5 Role Permission and Role based Access Control Typescript Admin Dashboard various roles like guest, user, admin, superadmin page access control  based Role Permission How to implement that role permission in Angular 5 typescript let discuss today.

Angular 5 Role Permission or Access Control
Angular 5 Role Permission or Access Control

ngx-permission

First install npm package and then install npm permission package ngx-permission


   npm i ngx-permissions


or


                                                        npm install ngx-permissions --save


and  then from your angular main module AppModule



mport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxPermissionsModule } from 'ngx-permissions';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
     NgxPermissionsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


And your app component sharemodule that import in multiple other feature modules, you can export the ngxpermissionsmodule to make sure you don't have to import in every module.


@NgModule({
    exports: [
        CommonModule,
        NgxPermissionsModule
    ]
})
export class SharedModule { }

and then lazy loaded modules should be add ngxpermission

when you lazy load a module, you should use the for child static method to import the ngxpermissionsmodule.

You can also  isolate the services by using permissionIsolate: true


@NgModule({
    imports: [
        NgxPermissionsModule.forChild()
    ]
})
export class LazyLoadedModule { }


@NgModule({
    imports: [
        NgxPermissionsModule.forChild({
        permissionsIsolate: true, 
        rolesIsolate: true})
    ]
})
export class LazyIsolatedLoadedModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application: Import service to the main application and load permissions

import { Component, OnInit } from '@angular/core'; import { NgxPermissionsService } from 'ngx-permissions'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'app'; constructor(private permissionsService: NgxPermissionsService, private http: HttpClient) {} ngOnInit(): void { const perm = ["ADMIN", "EDITOR"]; this.permissionsService.loadPermissions(perm); this.http.get('url').subscribe((permissions) => { //const perm = ["ADMIN", "EDITOR"]; example of permissions this.permissionsService.loadPermissions(permissions); }) } }


template view file

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']"> <div>You can see this text congrats</div> </div> <ng-template ngxPermissionsOnly="ADMIN"> <div>You can see this text congrats</div> </ng-template> <ng-template [ngxPermissionsExcept]="['JOHNY']"> <div> All will see it except JOHNY</div> </ng-template>
Angular 5 Role Permission and Role Based Access Control Dev2Tricks 5 of 5
Angular 5 Role Permission and Role Based Access Control Hi Guys Today Discuss Angular 5 Role Permission and Role based Access Control Ty...

Share this

Related Posts

Previous
Next Post »

3 comments

comments
21 September 2018 at 15:10 delete

Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way. T hank you so much.
Ethical Hacking Course
Ethical Hacking Certification
Hacking Course
Learn Ethical Hacking

Reply
avatar
22 September 2020 at 09:36 delete

https://ngdeveloper.com/angular-access-control-using-ngx-permission/

Reply
avatar