Todo app switch user roles

footer.component.ts

import { Component, Input } from '@angular/core';
import { Ability } from '@casl/ability';
import { defineAbilitiesFor } from '../../services/ability';

@Component({
  selector: 'todo-footer',
  template: `
    ...
      <ul class="filters">
        <li class="help">Switch roles</li>
        <li><a href="#" [class.selected]="role == 'admin'" (click)="setRole('admin')">Admin</a></li>
        <li><a href="#" [class.selected]="role == 'member'" (click)="setRole('member')">Member</a></li>
      </ul>
    ...
  `,
})
export default class TodoFooter {
  @Input() items = [];

  role = 'member';

  constructor(private ability: Ability) {}

  setRole(name) {
    if (this.role !== name) {
      this.role = name;
      this.ability.update(defineAbilitiesFor(name))
    }
  }
}