title: Projecting ngFor template in <ng-content> isn't working
body: <p>I'm working on an Angular 4 project and I'm stuck on a problem regarding templates.</p>
  
  <p>Let me explain it better.
  I have two components in my project: </p>
  
  <ul>
  <li>SectionCompontent.ts </li>
  <li>HomeCompontent.ts</li>
  </ul>
  
  <p>These are the relative HTML templates</p>
  
  <p><strong>section.compontent.html</strong></p>
  
  <pre><code>&lt;div class="section"&gt;
      &lt;div class="cards"&gt;
          &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>home.compontent.html</strong></p>
  
  <pre><code>&lt;section&gt;
      &lt;div *ngFor="let card of cards"&gt;
          &lt;span&gt;{{card.title}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <hr>
  
  <p>When I run this project, I expect to see the rendered content of *ngFor projected inside SectionComponent where <code>&lt;ng-content&gt;</code> is located.</p>
  
  <p>Unfortunately, this is what I see on the DOM instead of <code>&lt;ng-content&gt;</code>: </p>
  
  <pre><code>&lt;!--bindings={}--&gt;
  </code></pre>
  
  <p>I added some static HTML tags like <code>&lt;p&gt;</code> and <code>&lt;h1&gt;</code> and they allowed it to work.</p>
  
  <p>Can you help me solve this problem?
  Thanks in advance.</p>