Angular Permissions
Library for Angular with directives to show and hide controls based on permissions and an option to make the permissions typed.
Usage
*hasPermission
Show the control if the user has the permissions.
<div *hasPermission="'can_write'">
permission <strong>can_write</strong>
</div>When an array is supplied, it uses the operator AND by default.
<div *hasPermission="['can_read', 'can_write'];">
permission <strong>can_write</strong> AND <strong>can_read</strong>
</div>You can also supply the operator to turn it into an OR condition.
<div *hasPermission="['can_write', 'is_admin']; operator: 'OR'">
permission <strong>can_write</strong> OR <strong>is_admin</strong>
</div>Usage with an else template.
<div *hasPermission="['can_read', 'is_admin']; operator: 'AND'; else elseBlock">You have permissions.</div>
<ng-template #elseBlock>Sorry this feature is not for you.</ng-template>enableForPermission
Enable an input control when the user has permission.
<label>
enable when can_write <input [formControl]="newValueInput1" [enableForPermission]="'can_write'" >
</label>Enable an input control when the user has the permissions.
<label>
enable when can_write AND is_admin <input [formControl]="newValueInput1" [enableForPermission]="['can_write','is_admin']" >
</label>Enable an input control when the user has one of the permissions.
<label>
enable when can_write OR is_admin <input [formControl]="newValueInput1" [enableForPermission]="['can_write','is_admin']; operator: 'OR'" >
</label>disableForPermission
Disable an input control when the user has permission.
<label>
disable when can_write <input [formControl]="newValueInput1" [disableForPermission]="'can_read'" >
</label>Disable an input control when the user has the permissions.
<label>
disable when can_write AND is_admin <input [formControl]="newValueInput1" [enableForPermission]="['can_write','is_admin']" >
</label>Disable an input control when the user has one of the permissions.
<label>
disable when can_write OR is_admin <input [formControl]="newValueInput1" [disableForPermission]="['can_write','is_admin']; operator: 'OR'" >
</label>Setup
Create the permission store, define the future/observable to load the permissions, and add the PermissionsModule to the imports section of your module.
@Injectable({
providedIn: 'root',
})
export class AppPermissionsStore extends PermissionsStore {
constructor(httpClient: HttpClient) {
super();
this.permissions$ = httpClient
.get<PermissionData>('/api/getpermissions')
.pipe(shareReplay(1), map((val) => val.permissions));
}
}
interface PermissionData {
permissions: string[];
}Setup for typed permissions
Perform the same steps as in the Setup section above.
permissions.ts
type PermissionNames =
'can_write' |
'can_read' |
'is_admin';
export type Permissions = PermissionNames | PermissionNames[];typed-permissions.module.ts
import { CommonModule } from '@angular/common';
import { Directive, NgModule } from '@angular/core';
import {
EnableForPermissionDirective,
DisableForPermissionDirective,
HasPermissionDirective,
enableSelector,
disableSelector,
hasPermissionSelector
} from '@eriklieben/angular-permissions';
import { Permissions } from './permissions'
@Directive({
selector: enableSelector
})
export class TypedEnableForPermissionDirective extends EnableForPermissionDirective<Permissions> {};
@Directive({
selector: disableSelector
})
export class TypedDisableForPermissionDirective extends DisableForPermissionDirective<Permissions> {};
@Directive({
selector: hasPermissionSelector
})
export class TypedHasPermissionDirective extends HasPermissionDirective<Permissions> {};
@NgModule({
declarations: [
TypedDisableForPermissionDirective,
TypedEnableForPermissionDirective,
TypedHasPermissionDirective
],
imports: [
CommonModule,
],
exports: [
TypedDisableForPermissionDirective,
TypedEnableForPermissionDirective,
TypedHasPermissionDirective
]
})
export class TypedPermissionsModule {}