角度7 +角度材质。 如何在扩展的菜单下拉菜单中切换图标？

Question

I've got a problem with toggling icon on expanded <mat-menu> .
For expanding dropdown I'm using [matMenuTriggerFor]="menu" .
Dropdown is expanding and hiding when I click outside the dropdown menu.

Problem :
I can't figure out how I can toggle <mat-icon>expand_more</mat-icon> to <mat-icon>expand_less</mat-icon> when dropdown is shown and in opposite way when dropdown is hidden.
I've noticed that [aria-expanded]="true" attribute is present on one of my divs when dropdown is shown. Whole attribute disappears on closing dropdown.
Can you help me achieve toggling icon on dropdown menu?

As you can see there is {{iconExpand}} interpolation where I would like to provide icon name on toggling dropdown.

<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

Just check the menuOpen property:

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