Angular Material mat-expansion-panel opened event always returns undefined

Question

As you may know from angular material docs, mat-expansion-panel have @Output named "opened", that is emitted when the accordion item is opened. I want to catch that opened event and identify which panel was opened. But this simple code (below) always returns only undefined. What did I do wrong? Is this output emits only undefined or did I miss something? Material docs says nothing about that situation.

component.html

<mat-accordion multi>
  <mat-expansion-panel (opened)="openGroup($event)" *ngFor="let element of Data">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <ul class="nav-tabs">
          <li class="col-xs-3">{{element.param1}}</li>
          <li class="col-xs-5">{{element.param2}}</li>
          <li class="col-xs-3">{{element.param3}}</li>
        </ul>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div>
      <p>{{element.content}}</p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

component.ts

Data = [
  // This returns from backend, this is only for show that the Data is not empty
  { /* some data here*/ },
  { /* some data here*/ },
  { /* some data here*/ }
];

openGroup(e) {
  console.log(e);
}

p4r1 p4r1 · Accepted Answer · 2018-04-02T14:40:41

This is by design; the docs site specifies that the type of the opened event is void, so the event contains nothing. If you want to have the same event handler for multiple expansion panels, you could use something like this:

<mat-expansion-panel (opened)="openGroup('expansion1')"></mat-expansion-panel>
<mat-expansion-panel (opened)="openGroup('expansion2')"></mat-expansion-panel>

or, maybe better for your case:

<mat-expansion-panel *ngFor="let element of Data" (opened)="openGroup(element.someProp)">

Angular Material mat-expansion-panel opened event always returns undefined

1 Answers