Установить динамическую переменную шаблона в динамически отображаемом HTML с помощью Angular

Question

Я отображаю динамически отображаемую древовидную структуру с панелью расширения углового материала. Я настроил панель расширения так, чтобы стрелка раскрытия слева отображала троичный оператор, например:

Вот как я рендерим панель расширения:

Шаблон родительского компонента:

<div>
  <ui-tree [data]="data" [key]="key"></ui-tree>
</div>

Шаблон дочернего компонента:

    <div *ngIf="items.length">
  <mat-expansion-panel hideToggle="true" class="border mat-elevation-z0" *ngFor="let item of items" #toggle (click)="toggle.value = !toggle.value">
    <mat-expansion-panel-header>
      <mat-panel-title (click)="icon.value ? icon.value = true : icon.value = false;">
        <mat-icon>{{toggle.value ? 'navigate_next': 'keyboard_arrow_down'}}</mat-icon>
        <div class="col-md-9">
          {{item.name}}
        </div>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <button mat-button>Add Role</button>

    <ui-tree *ngIf="item[key].length" [key]="key" [data]="item[key]"></ui-tree>
  </mat-expansion-panel>
</div>

Я хочу изменить заголовок при щелчке, значок должен указывать вправо, если он закрыт, и указывать вниз, если он открыт.Как мне этого добиться?