Angular Material - Self aware panel without accompanying variable in typescript component

[Codewise IO]

The example for the Expansion Panel at the Angular Material design website shows a "self-aware" panel that sets a variable based on the panel's open/closed state. What I would like to do is display some content in the panel header depending on the panel's open/closed state. I would like to do this without having to maintain a variable within the accompanying typescript file. How can I do this?

<mat-expansion-panel class="supervisor-panel">
  <mat-expansion-panel-header>
    <div class="supervisor">1001 Clark Kent</div>

    <!-- this is the code I need -->
    {{ thisPanel.expanded ? 'Open' : 'Closed }}

  </mat-expansion-panel-header>
  <div>Expanded content</div>
</mat-expansion-panel>

[Sander Elias]

Hi Codewise

Did you try adding a template var to the element?

<mat-expansion-panel #thisPanel class="supervisor-panel">

<mat-expansion-panel-header>

<div class="supervisor">1001 Clark Kent</div>

{{ thisPanel.expanded ? 'Open' : 'Closed }}

</mat-expansion-panel-header>

<div>Expanded content</div>

</mat-expansion-panel>

Did not try, but I suspect it will work. (if not, provide a stackblitz and I will fix it)

Regards
Sander