menu.component.ts

import { Component } from '@angular/core'
import { AppStateService, ACTIVE_MENU, AUTHENTICATED } from './app-state.service'
import  { MenuItems, MENU_LABELS } from './model'

@Component({
  selector: 'fs-menu',
  template: `
<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">      
  <button *ngIf="!(this.state.authenticated$ | async)" 
          (click)="onMenuClick(menuItems.LOGIN)" 
          mat-menu-item 
          [innerHtml]="menuItems.LOGIN"></button>
  <button *ngIf="this.state.authenticated$ | async" 
          (click)="onMenuClick(menuItems.LOGOUT)" 
          mat-menu-item
          [innerHtml]="menuItems.LOGOUT"></button>    
  <button (click)="onMenuClick(menuItems.SAVE)" 
          mat-menu-item 
          [innerHtml]="menuItems.SAVE"></button>
</mat-menu>
`
})
export class MenuComponent  {
  menuItems:MenuItems = MenuItems
  constructor(public state:AppStateService) {}
  menus:string[] = MENU_LABELS()
  onMenuClick(menu:string) {
    switch(menu) {
      case MenuItems.LOGIN:
      this.state.login()
      break;
      case MenuItems.LOGOUT:
      this.state.logout()
      break;
      case MenuItems.SAVE:
      this.state.save()
      break;
    }
    this.state.os.put(ACTIVE_MENU, menu)
  }
}