drey2020 / casl-angular-example

Example integration of CASL and Angular 2+

CASL and Angular integration example

DEPRECATED

The example has been moved to https://github.com/stalniy/casl-examples/tree/master/packages/angular-todo

This example shows how to integrate CASL auhorization (i.e. permissions) in Angular application by using completmentary module @casl/angular. Read Managing user permissions in Angular app for detailed explanation.

Generated with angular cli

Installation

# install dependencies
npm install 

# serve with hot reload at localhost:4200
npm start

Description

This application is a basic Todo application with possibility to specify assignee for a task. By default, all users are able to create and read all tasks but update and delete only assigned to them. Any user may create a task and assign it to other users.

Ability configuration can be found in src/services/ability.js, the function that creates Ability instance is in the same file.

Example

<todo-form 
  (newTodo)="addTodo($event)" 
  *ngIf="'Todo' | can: 'create'"
></todo-form>