GitHub - e-cloud/ng2-permission: A angular2+ version of
https://github.com/e-cloud/ng2-permission
Option 1: Standalone service Option 1: Standalone service
Create a service to define permissions and roles, and use it in the root component of your app.
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss']
})
export class AppComponent { constructor(defineService: DefinePermissionsAndRolesService) { defineService.init() }
}Option 2: APP_INITIALIZER Option 2: APP_INITIALIZER
See Create a service to define permissions and roles, and use it via APP_INITIALIZER
Directive
Once the library is imported, you can use its components, directives and pipes in your Angular application:
<!-- permission ia a string(or RawPermissionMap) variable representing a permission or role -->
<h1 *permissionIf="permVar"> {{title}}
</h1>
Use directives
we provide four directives now for various purposes.
<!-- powerful permissionIf, if you pass string or string array, it will behave as permissionOnly. if you pass an object, it will process all rules specified. -->
<h1 *permissionIf="permVar">{{ title }}</h1>
<h1 *permissionIf="'a string'">{{ title }}</h1>
<h1 *permissionIf="['string a', 'string b']">{{ title }}</h1>
<h1 *permissionIf="{ only: 'string a', except: 'string b', 'anyOf': 'string c' }">{{ title }}</h1>
<h1 *permissionIf="'a string'; else elseTpl">{{ title }}</h1> <!-- only process with `only` rule -->
<h1 *permissionOnly="'a string'">{{ title }}</h1>
<h1 *permissionOnly="['string a', 'string b']">{{ title }}</h1>
<h1 *permissionOnly="'a string'; else elseTpl">{{ title }}</h1> <!-- only process with `except` rule -->
<h1 *permissionExcept="'a string'">{{ title }}</h1>
<h1 *permissionExcept="['string a', 'string b']">{{ title }}</h1>
<h1 *permissionExcept="'a string'; else elseTpl">{{ title }}</h1> <!-- only process with `anyOf` rule -->
<h1 *permissionAnyOf="['string a', 'string b']">{{ title }}</h1>
<h1 *permissionAnyOf="['string a', 'string b']; else elseTpl">{{ title }}</h1> <ng-template #elseTpl>some text</ng-template>
This library is for angular 2+. Its implementation is inspired by angular-permission. And its usage therefore is similar to angular-permission. However,its functionality is a superset compared to angular-permission
DA: 86 PA: 73 MOZ Rank: 2
