ngx-permissions

Permission and roles based access control for your angular(angular 21.x.x) applications

Installation

To install this library, run:

$ npm install @anzflex/ngx-permissions --save

Consuming library

You can import library in any Angular application by running:

$ npm install @anzflex/ngx-permissions  --save

and then from your Angular app.config.ts:

import { provideNgxPermissions, provideNgxPermissionsChild } from '@anzflex/ngx-permissions';

export const appConfig: ApplicationConfig = {
  providers: [
    
     provideNgxPermissions(),
      //...your other providers

  ]
};

SharedModule

If you use a SharedModule that you import in multiple other standalone components, you can export the NgxPermissionsModule to make sure you don't have to import it in every component.

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

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 '@anzflex/ngx-permissions';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [],
})
export class AppComponent implements OnInit {

   title = 'app';
   permissionsService = inject(NgxPermissionsService)
   http = inject(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);
    })
  }
}

Usage in templates

<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>

To load permissions before application start up

APP_INITIALIZER is defined in angular/core. You include it in your app.module.ts like this.

APP_INITIALIZER is an OpaqueToken that references the ApplicationInitStatus service. ApplicationInitStatus is a multi provider. It supports multiple dependencies and you can use it in your providers list multiple times. It is used like this.

import { APP_INITIALIZER } from '@angular/core';

@NgModule({
  providers: [
    DictionaryService,
    {
      provide: APP_INITIALIZER,
      useFactory: (ds: DictionaryService, ps: NgxPermissionsService ) => function() {return ds.load().then((data) => {return ps.loadPermissions(data)})},
      deps: [LoadService, NgxPermissionsService],
      multi: true
    }]
})
export class AppModule { }

For google

angular 2 permissions, angular 4 permissions, angular permissions, angular 5 permissions ng2 permissions ng permissions ng-permissions ng2-permissions angular2 permissions angular4 permissions angular 5 permissions

License

MIT © Nassor Anzuann