Home

Permission helps you gain control of your routes, by using simple concepts for you to decide who can access them.

Disclaimer

- This library is PROHIBITED to use with russians projects or russians or belarusians 

reason https://9gag.com/gag/a41zRvw and many more

If You can help Ukrainian army https://bank.gov.ua/en/about/support-the-armed-forces

Humanitarian aid https://bank.gov.ua/en/about/humanitarian-aid-to-ukraine

Any help is welcomed.

YouTube

I'm working on tutorial for the library will add more video with time. This is my first videos YouTube

Support

If You have chance please support on patreon for more open source ideas

Installation

To install this library, run:

$ npm install ngx-permissions --save

Demo

You can test library in Plunker

Consuming library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install ngx-permissions  --save

and then from your Angular AppModule:

import { 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 { }

SharedModule

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

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

Note: Never call a forRoot static method in the SharedModule. You might end up with different instances of the service in your injector tree. But you can use forChild if necessary.

Lazy loaded modules

When you lazy load a module, you should use the forChild static method to import the NgxPermissionsModule.

Since lazy loaded modules use a different injector from the rest of your application, you can configure them separately. You can also isolate the service by using permissionsIsolate: true or rolesIsolate: true. In which case the service is a completely isolated instance. Otherwise, by default, it will share its data with other instances of the service.

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

@NgModule({
    imports: [
        NgxPermissionsModule.forChild({
        permissionsIsolate: true, 
        configurationIsolate: 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);
    })
  }
}

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>