@eriklieben/angular-permissions

View permissions for Angular

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@eriklieben/angular-permissions
0.0.66 months agoa year agoMinified + gzip package size for @eriklieben/angular-permissions in KB

Readme

Angular Feature Flags
View permissions for Angular

Usage

<div *hasPermission="'can_write'">
  permission <strong>can_write</strong>
</div>

<div *hasPermission="'can_read'">
  permission <strong>can_read</strong>
</div>

<div *hasPermission="['can_read', 'can_write']; operator: 'AND'">
  permission <strong>can_write</strong> AND <strong>can_read</strong>
</div>

<div *hasPermission="['can_read', 'is_admin']; operator: 'AND'">
  permission <strong>can_write</strong> AND <strong>is_admin</strong>
</div>

<div *hasPermission="['can_read', 'is_admin']; operator: 'OR'">
  permission <strong>can_write</strong> OR <strong>is_admin</strong>
</div>

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

<input [formControl]="newValueInput" [enableForPermission]="'can_write'" >
<input [formControl]="newValueInput" [enableForPermission]="['can_read', 'can_write']" >
<input [formControl]="newValueInput" [enableForPermission]="['can_read', 'can_write']" permissionOperator="OR">

<input [formControl]="newValueInput" [disableForPermission]="'can_write'" >
<input [formControl]="newValueInput" [disableForPermission]="['can_read', 'can_write']" >
<input [formControl]="newValueInput" [disableForPermission]="['can_read', 'can_write']" permissionOperator="OR">

Setup

Response from server

{
    "permissions": ["can_read", "can_write", "is_admin"]
}

Setup module

permissions-configuration.service
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'any'
})
export class PermissionsConfigurationService {

  constructor(private http: HttpClient) { }

  public getPermissions = (): Observable<string[]> => {
    return this.http.get<PermissionData>('/api/getpermissions')
      .pipe(map((val) => val.permissions));
  }
}

interface PermissionData {
  permissions: string[];
}

permissions.service.provider.ts
import { PermissionsService } from '@eriklieben/angular-permissions';
import { PermissionsConfigurationService } from './permissions-configuration.service';

const permissionsServiceFactory = (provider: PermissionsConfigurationService) => {
  return new PermissionsService(provider.getPermissions);
};

export let PermissionsServiceProvider = {
  provide: PermissionsService,
  useFactory: permissionsServiceFactory,
  deps: [PermissionsConfigurationService]
};

app.module.ts
```typescript @NgModule({ declarations:
AppComponent
, imports:
HttpClientModule,
PermissionsModule,
, providers:
PermissionsServiceProvider
, bootstrap: AppComponent }) ```