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);
}

Answer 1

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)">