How to get state of mat-expansion-panel?-CodePudding

<mat-expansion-panel #linkServices>
  <mat-expansion-panel-header>
    <mat-panel-title>
      <mat-icon>request_quote</mat-icon>Services</mat-panel-title>
    <mat-panel-description>
      Add a service
    </mat-panel-description>
  </mat-expansion-panel-header>
  ...

I want to know if my panel is opened or closed. This is how I tried it with a ViewChild():

console.log(this.linkServices.nativeElement.expanded);

but I get the error

TypeError: Cannot read properties of undefined (reading 'expanded')

CodePudding user response：

You can leverage opened and closed output events:

public isOpened: boolean;

<mat-expansion-panel (opened)="isOpened = true" (closed)="isOpened = false">
  ...
</mat-expansion-panel>