Угловой 7 + Угловой Материал. Как переключить значок раскрывающегося раскрывающегося меню?

Question

У меня проблема с переключением значка на расширенном <mat-menu>.
Для раскрывающегося списка я использую [matMenuTriggerFor]="menu".
Раскрывающийся список раскрывается и прячется, когда я щелкаю вне выпадающего меню.

Проблема:
Я не могу понять, как переключить <mat-icon>expand_more</mat-icon> на <mat-icon>expand_less</mat-icon>, когда отображается раскрывающийся список, и наоборот, когда раскрывающийся список скрыт.
Я заметил, что атрибут [aria-expanded]="true" присутствует на одном из моих div'ов, когда отображается выпадающий список. Весь атрибут исчезает при закрытии раскрывающегося списка.
Можете ли вы помочь мне добиться переключения значка в раскрывающемся меню?

Как вы можете видеть, есть {{iconExpand}} интерполяция, в которой я хотел бы указать имя значка при переключении выпадающего списка.

<div class="NavbarUser" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <tl-mat-button [noPadding]="true" [colorTheme]="'linkGrey'"
  class="NavbarUserName tl-mat-padding-r-base">
    {{ input.user.fullName }}
  </tl-mat-button>
  <tl-mat-image-thumbnail [size]="'small'" [thumbnailUrl]="input.user.thumbnailUrl">
  </tl-mat-image-thumbnail>

  <mat-icon class="Profile__DropdownArrow--Icon">{{iconExpand}}</mat-icon>
  <mat-menu #menu="matMenu">
    <div>
      <hr/>
    </div>
    <button mat-menu-item *ngFor="let profileButton of input.dropDownPaths"
    [routerLink]="profileButton.relativeUrl">
      <img class="Profile__Dropdown--Icons" src="{{profileButton.iconUrl}}" />
      <span class="Profile__Dropdown--Text">{{profileButton.title}}</span>
    </button>
  </mat-menu>
</div>

Answer 1

Просто отметьте menuOpen свойство:

<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <mat-icon>
    {{menuTrigger.menuOpen ? 'expand_less' : 'expand_more'}}
  </mat-icon>
</div>