Bug, feature request, or proposal:

without *ngFor, 2 expansion-panel will work correctly inside a mat-accordion.

<mat-accordion>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      This is the expansion 1 title
    </mat-expansion-panel-header>

    This the expansion 1 content

  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      This is the expansion 2 title
    </mat-expansion-panel-header>

    This the expansion 2 content

  </mat-expansion-panel>

</mat-accordion>

But if I use *ngFor, the content will not open when I click.

<mat-accordion>
  <mat-expansion-panel *ngFor="let panel of panels">
    <mat-expansion-panel-header>
      {{panel.title}}
    </mat-expansion-panel-header>
    {{panel.content}}
  </mat-expansion-panel>

</mat-accordion>

What is the expected behavior?

with *ngFor, it should still work as expected.

What is the current behavior?

with *ngFor, the expansion panel will not open.

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/DlHd6U

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

The plunker template not working....

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.0.0-beta7
material 2.0.0-beta.12
Typescript 2.4.2
Browsers Chrome

Is there anything else we should know?

Thanks.