title: Angular - Dynamic content projection
body: <p>I have a base component &quot;record-base-component&quot; contains an ngFor loop to display sections over an array &quot;sections&quot;, and I need to use content projection inside the loop to project the content in a child component &quot;attendance-status-record&quot;.<br>
  the issue is I always have an empty content inside the child component template.<br></p>
  <p><strong>record-base-component</strong></p>
  <pre><code>&lt;div class=&quot;base-record-container&quot;&gt;
    &lt;div
      class=&quot;base-record-section&quot;
      *ngFor=&quot;let section of sections; let i = index&quot;
      id=&quot;section-{{ section.Id }}&quot;
    &gt;
      &lt;h4 id=&quot;section-title&quot;&gt;{{ section.Title }}&lt;/h4&gt;
      &lt;ng-content select=&quot;.section-{{ i }}&quot;&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>attendance-status-record</strong></p>
  <pre><code>&lt;app-record-base-component [sections]=&quot;sections&quot;&gt;
    &lt;ng-container class=&quot;section-0&quot;&gt;
      test
    &lt;/ng-container&gt;
    &lt;div class=&quot;section-1&quot;&gt;
      test 2
    &lt;/div&gt;
  &lt;/app-record-base-component&gt;
  </code></pre>
  <p>this result is always:
  <a href="https://i.stack.imgur.com/wN64I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wN64I.png" alt="empty content projection" /></a></p>