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