Как поменять мат-иконку при нажатии?

Question

Я использую mat-menu в Angular и хочу сменить mat-icon, если щелкну, но все работает не так, как я ожидал. Что я могу делать не так?

Это мой app.html:

<button mat-icon-button [matMenuTriggerFor]="menu" >
  <mat-icon (click)="changeIcon()">{{icon}}</mat-icon>
</button>

<mat-menu #menu="matMenu" [overlapTrigger]="false">
  <button mat-menu-item>
    <span>Log in</span>
  </button>
  <button mat-menu-item>
    <span>Register</span>
  </button>  
</mat-menu>

и мои app.ts

export class HeaderComponent implements OnInit {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  icon = 'more_vert';

  constructor() {
  }

  ngOnInit() {
  }

  changeIcon() {
    if (this.trigger.menuClosed) {
      this.icon = 'more_vert';
      console.log('fermer');
    }
    if (this.trigger.menuOpened) {
      this.icon = 'close';
      console.log('ouvert');
    }
  }
}

Answer 1

Просто подумал, что добавлю это, поскольку эта запись появилась, когда я искал что-то похожее.

Вы можете поместить свой (click)="changeIcon()" в разметку и просто установить его в файле .TS (пусть ваши подписчики сделают всю работу):

ngAfterViewInit() {
    this.changeIcon();
}

Answer 2

Я нашел частичное решение. другие предложения?

app.html

<button mat-icon-button [matMenuTriggerFor]="menu" (click)="changeIcon()" #menuTrigger="matMenuTrigger" >

    <mat-icon>{{icon}}</mat-icon>
  </button>
  <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>
      <span>Log in</span>
    </button>
    <button mat-menu-item>
      <span>Register</span>
    </button>

  </mat-menu>

и app.ts

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit  {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

icon = 'more_vert';

constructor() {
}

ngOnInit() {

}


changeIcon() {
  this.trigger.menuClosed.subscribe(() => this.icon = 'more_ver');
  this.trigger.menuOpened.subscribe(() => this.icon = 'close');

}

}