Narcissistic Piano Mover


    0.1.0 • Public • Published


    Ember addon for CASL which makes it easy to add permissions in any Ember application.

    This package allows to integrate @casl/ability with Ember application.

    It provides:

    • Ability service that allows you to define CASL ability compatible with Ember tracked properties.
    • Can/Cannot component that allow to hide or show UI elements based on user ability to see them.


    • Ember.js v3.20 or above
    • Ember CLI v3.20 or above
    • Node.js v10 or above
    • ember-auto-import v2.0 or above


    ember install ember-casl


    Ability Service

    Define ability like regular Ember services by extending AbilityService.

    // services/post-ability.js
    import { tracked } from '@glimmer/tracking';
    import AbilityService from 'ember-casl/services/ability';
    export default class PostAbility extends AbilityService {
      @tracked isWriter = false;
      get definition() {
        return ({ can, cannot }) => {
          can('read', 'post');
          if (this.isWriter) {
            can('write', 'post');
          } else {
            cannot('write', 'post').because("You're not a writer");

    The definition getter should return a function taking destructured AbilityBuilder as argument (build excluded).

    It allows you to define very complex reactive ability (eg. Ability based on tracked property or another service).

    Your newly created Ability service expose some fields

    Name Type Description
    ability CASL Ability Original CASL Ability
    can Method Wrapper on CASL Ability method can
    cannot Method Wrapper on CASL Ability method cannot
    relevantRuleFor Method Wrapper on CASL Ability method relevantRuleFor

    Then you can use those abilities as regular services in your Ember application.

    // components/dummy.js
    import Component from '@glimmer/component';
    import { inject as service } from '@ember/service';
    export default class Dummy Component extends Component {
      @service postAbility;
      get canRead() {
        return this.postAbility.can('read', 'post');
      get cannotWriteReason() {
        return this.postAbility.relevantRuleFor('read', 'post').reason;

    Can / Cannot Helpers

    You can use can & cannot helpers in your templates.

    {{#if (can 'read' 'post' service='post-ability')}}
      <span>You're a reader</span>
    {{#if (cannot 'write' 'post' service='post-ability')}}
      <span>You're not a writer</span>

    Positional params are CASL Ability can / cannot arguments. service is the name of the Ember service.


    See the Contributing guide for details.


    This project is licensed under the MIT License.


    npm i ember-casl

    DownloadsWeekly Downloads






    Unpacked Size

    13.2 kB

    Total Files


    Last publish


    • ctjhoa
    • npmjs-concordnow