title: Angular Material mat-expansion-panel opened event always returns undefined
body: <p>As you may know from angular material docs, <a href="https://material.angular.io/components/expansion/api" rel="noreferrer">mat-expansion-panel</a> 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.</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;mat-accordion multi&gt;
    &lt;mat-expansion-panel (opened)="openGroup($event)" *ngFor="let element of Data"&gt;
      &lt;mat-expansion-panel-header&gt;
        &lt;mat-panel-title&gt;
          &lt;ul class="nav-tabs"&gt;
            &lt;li class="col-xs-3"&gt;{{element.param1}}&lt;/li&gt;
            &lt;li class="col-xs-5"&gt;{{element.param2}}&lt;/li&gt;
            &lt;li class="col-xs-3"&gt;{{element.param3}}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/mat-panel-title&gt;
      &lt;/mat-expansion-panel-header&gt;
  
      &lt;div&gt;
        &lt;p&gt;{{element.content}}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/mat-expansion-panel&gt;
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>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);
  }
  </code></pre>