изменить значок заголовка расширения мата в пользовательской функции переключения

Question

Я хочу назвать расширение панели в материале только на значке, а не на полном заголовке, для которого я использовал следующий код:

компонент:

     expandPanel(matExpansionPanel: MatExpansionPanel, event: Event): void {
            event.stopPropagation();

            if (!this._isExpansionIndicator(event.target)) {
              matExpansionPanel.toggle();
              console.log(event.target)
            }
          }

          private _isExpansionIndicator(target: EventTarget): boolean {
            const expansionIndicatorClass = 'icon-Expand';
            const element = event.target as HTMLInputElement;
            return (
              element.classList && element.classList.contains(expansionIndicatorClass)
            );
          }

html:

    <mat-expansion-panel-header (click)="expandPanel(matExpansionPanel, $event)">
        <div class="controller">        
           <span class="icon-Expand">expand</span>
         </div>
       </div>
    </mat-expansion-panel-header>
``

It is working as expected but I want to use custom template such that when the panel is collapsed, the class `icon-Expand` is changed to `icon-collapse`

How can I achieve that?

Answer 1

*ngIf="matExpansionPanel.expanded; else isCollapsed"

это будет работать