title: Using mat-accordion and mat-expansion-panel in ngFor
body: <p>I am trying to loop some items with an ngFor and create a mat-expansion-panel for each item.</p>
  
  <p>I would like to encapsulate the logic for each item into an item component:</p>
  
  <pre><code>    &lt;item&gt;&lt;/item&gt;
  </code></pre>
  
  <p>Initial attempt:</p>
  
  <pre><code>&lt;mat-accordion&gt;
    &lt;div *ngFor="let item of items" &gt;
      &lt;item [item]="item"&gt;&lt;/item&gt;
    &lt;/div&gt;
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>Where item template is:</p>
  
  <pre><code>    &lt;mat-expansion-panel&gt;
        &lt;mat-expansion-panel-header&gt;
          Header Content
        &lt;/mat-expansion-panel-header&gt;
  
        &lt;div&gt;
           Expandable content
        &lt;/div&gt;
      &lt;/mat-expansion-panel&gt;
  </code></pre>
  
  <p>The problem with this approach is that there is an extra html element for my component between <code>&lt;mat-accordion&gt;</code> and <code>&lt;mat-expansion-panel&gt;</code>, which messes up the css for the accordion.</p>
  
  <p>Is there a way that my component can provide the header and content?</p>
  
  <pre><code>    &lt;mat-accordion&gt;
        &lt;div *ngFor="let item of items" &gt;
            &lt;mat-expansion-panel&gt;
              &lt;mat-expansion-panel-header&gt;
                &lt;!-- put item component header here-&gt;
              &lt;/mat-expansion-panel-header&gt;
  
            &lt;div&gt;
              &lt;!-- put item component content here-&gt;
            &lt;/div&gt;
          &lt;/mat-expansion-panel&gt;
        &lt;/div&gt;
      &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>I have read up on ng-content, but I think that is backwards from what I want, I don't want to shove custom content into my component, I want to extract elements from my component and have them render in the parent.</p>
  
  <p>I do realize I could create 2 components, item-header and item-content.  However I would really like to keep that login in one component.</p>