title: How to render multiple ng-content inside an ngFor loop using Angular 4?
body: <p>I'm trying to display two differents <code>ng-content</code> inside two <code>ngFor</code> loops.
  But as described in <a href="https://stackoverflow.com/a/35192483/7259343">this</a> answer, Angular can't project ng-content multiple times.</p>
  
  <p>I tried <a href="https://stackoverflow.com/a/44699654/7259343">this</a> solution, but this does not allow me to project multiple times my content, only to display it at different places depending on an <code>ngIf</code> condition.</p>
  
  <p>Here's my actual code :</p>
  
  <p>An example parent component (any component using app-table). That's what I want to do. </p>
  
  <pre><code>&lt;app-table [data]="myData"&gt;
    &lt;div lineHeader let-line&gt;
      {{line.name}}
    &lt;/div&gt;
    &lt;div lineContent let-element&gt;
      {{element.name}}
    &lt;/div&gt;
  &lt;/app-table&gt;
  </code></pre>
  
  <p>The child component (app-table). Here I can do everything while the parent component keeps working the same way.</p>
  
  <pre><code>&lt;div *ngFor="let line of data"&gt;
    &lt;ng-content select="[lineHeader]"&gt;&lt;/ng-content&gt;
    &lt;div *ngFor="let element of line"&gt;
      &lt;ng-content select="[lineContent]"&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>