casl integration with angular 6

// Login Conponent

ngOnInit() {
  var jsonBody = {};
  jsonBody['email'] = 'peter@klaven';
  jsonBody['password'] = 'cityslicka';

  this._session.login(jsonBody)
}

//session.ts

import { Ability } from '@casl/ability'
 
export class Session {
  private token: string
 
  constructor(private ability: Ability) {}
 
  login(jsonBody) {
    return fetch('https://reqres.in/api/login', { method: 'POST', body:  JSON.stringify(jsonBody) })
      .then(response => response.json())
      .then(session => {
        this.ability.update(session.rules)
        this.token = session.token
       })
  }
 
  logout() {
    this.token = null
    this.ability.update([{ actions: 'read', subject: 'all' }])
  }
}

// Ability.ts

import { AbilityBuilder } from '@casl/ability';
 
export const ability = AbilityBuilder.define(can => {
  can('read', 'all')
})

// can pipe

import { CanPipe } from '@casl/angular'
import { Pipe } from "@angular/core";

@Pipe({ name: 'can' })
export class MyCanPipe extends CanPipe {}

<div *ngIf="'Post' | can: 'create'">
  <a (click)="createPost()">Add Post</a>
</div>