Angular Material: change the panel title when expansion panel is expanded

Question

I was wondering if it was possible to change the panel title (of one of the multiple expansion panels) when the panel is expanded. It would be useful when titles are too long.

For example: I use as a title "Hello..." and when expanded it would be "Hello everybody"

I tried with the open and closed thing, but it changes every of my titles at the same time.

Thanks a lot!

Answer 1

The simplest way to do that would be with template logic. Apply a template reference variable to the expansion panel and use that to get the expanded status to vary the title text:

<mat-expansion-panel #thisPanel>
  <mat-expansion-panel-header>
    <mat-panel-title>

      {{ thisPanel.expanded ? 'Hello everybody' : 'Hello...' }}

    </mat-panel-title>
    ...
  </mat-expansion-panel-header>
  ...
</mat-expansion-panel>