Skip to content

Latest commit

 

History

History
 
 

angular-todo

CASL and Angular integration example

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

Use yarn to install dependencies, for some reason pnpm doesn't work with angular...

# install dependencies
yarn

# serve with hot reload at localhost:4200
yarn 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/AppAbility.ts, the function that creates Ability instance is in the same file.

Example

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