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

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>