title: Dynamically rendered mat-expansion-panel is not working as intended
body: <p>I need to dynamically render a list of expansion panels inside an accordion. </p>
  
  <p>The markup is pretty straight forward:</p>
  
  <pre><code>&lt;mat-accordion *ngIf="currentVenue"&gt;
    &lt;mat-expansion-panel *ngFor="let gig of currentVenue.gigs" expanded="false"&gt;
      &lt;mat-expansion-panel-header&gt;
        &lt;mat-panel-title&gt;
          {{gig.name}}
        &lt;/mat-panel-title&gt;
        &lt;mat-panel-description&gt;
          Type your name and age
        &lt;/mat-panel-description&gt;
      &lt;/mat-expansion-panel-header&gt;
  
    &lt;/mat-expansion-panel&gt;
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>Unfortunately this results in an unusable control. The header is not opening the panel and the whole accordion functionality is messed up as well. I need to click outside of the control and then randomly it opens one child expansion panel (or not).</p>
  
  <p>If I in turn use a "static" approach (I copied this from the samples' code), everything works as intended:</p>
  
  <pre><code>&lt;mat-accordion&gt;
    &lt;mat-expansion-panel&gt;
      &lt;mat-expansion-panel-header&gt;
        &lt;mat-panel-title&gt;
          Personal data
        &lt;/mat-panel-title&gt;
        &lt;mat-panel-description&gt;
          Type your name and age
        &lt;/mat-panel-description&gt;
      &lt;/mat-expansion-panel-header&gt;
  
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="First name"&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="Age"&gt;
      &lt;/mat-form-field&gt;
    &lt;/mat-expansion-panel&gt;
    [...]
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>My guess is, that it has to do with <code>*ngIf</code> and the way the controls are created. </p>
  
  <p>I'm using Angular Material 6.4.7 and Angular 6.1.10</p>