@casl/angular improvements

[TheDelta]

Great package and it truly kick started my permission handling for an Angular + NestJS project ❤️

Besides updating the documentation (which is probably done with next CASL version?) I would like to propose the following additional changes:

1. Add an official https://stackblitz.com (or some other provider) example playground project to help users evaluate and see the package in action asap (also great to report bugs, issues quickly)

2. AbilityModule should export the service and pipes.

Maybe I'm blind but I do not understand the motivation behind providing the pipe and service myself, other than to be able to configure it for advanced usage (which is not well documented for new users btw).

I think a AbilityModule.forRoot() method with configuration possibility would improve usage of the package.

3. AbilityService should expose besides the observable also the .ability (PureAbility) as ready to use property

Atm I must inject in my component AbilityService and PureAbility which seems unnecessary.
I could of course also just subscribe to AbilityService.ability$ but just seems unnecessary work for me as well.

My use case is to quickly set a flag if an user can do something.

---

Maybe some of these are already on the roadmap (didn't found anything 👀).
Eventually I can also provide some contributions to my proposed improvements and documentation if interested.

[stalniy]

AbilityService is not in AbilityModule['providers'] just to support tree-shaking. I can just add providedIn: 'root' to that service and it will solve the main issue I guess.

Eventually, I think pipes will be removed because they are a bit useless in more advanced scenarios. Currently, I do a lot of Angular development and with time I found useful rxjs patterns that helps to make things simpler. One of them is aggregated state:

export class AComponent {
   readonly state$: Obserbable<{
     items: SomeItem[];
     ability: AppAbility;
   }>;

   constructor(someService: SomeService, abilityService: AbilityService) {
       this.state$ = combineLatest([
         someService.getItems(), 
         abilityService.ability$
       ]).pipe(map(...))
   }
}

By doing this, I do not need pipes anymore, as I can just call methods of ability directly and be sure that whenever state$ is updated all permissions will be re-evaluated. Additionally, this eliminates the need of providing AbilityService.latestAbility property (or similar) to get direct access to Ability.

[TheDelta]

Yeah, that's what I also figured out and do exactly the same rxjs pattern.
I didn't worked much with the pipes yet, just for some stackblitz example (https://stackblitz.com/edit/angular-mbdvmu?file=src/main.ts) and during evaluation phase.

I hadn't found any issues with the pipes yet, but most likely I just did not stumble over it during testing.
For small (inline) components they are awesome, as long as they work as intended. :)

Maybe signals could solve the issues nicely in the future.

My motivation behind exposing the last state is mainly because I prefer to inject a server, than the PureAbility pipe if I need to check permission:

constructor(private readonly ability: AbilityService<AppAbility>)
// something like `ability.snapshot.can(...)`
vs
constructor(
    @Inject(PureAbility)
    private readonly ability: AppAbility
)
// something like `ability.can(...)`

(for my current project I'll simply use a wrapper service which uses a BehaviorSubject instead)

[stalniy]

So, frankly speaking, I think pipes will be removed eventually, as they sometimes doesn't work as expected and have their own performance issues (described in README).

The only "good" way to work with angular is through rxjs, native Angular change detection mechanism works well only for simple components (but it's IMO)

[stalniy]

regarding stackblitz, there is super simple codesandbox example -> https://codesandbox.io/p/sandbox/epic-phoebe-bi5jct?file=%2Fsrc%2Findex.js which is presented in first sentences of intro guide

So, not sure what else do you suggest to add

[TheDelta]

Sorry, I mean an example with angular. That would give new users just a way to play around with it.