title: Angular4 ng-content gets built when ngIf is false
body: <p>I have a problem with the new <code>ng-content</code> transclusion.</p>
  
  <p>Let's say I have a component <code>my-component</code> that, in its <code>ngOnInit()</code> function does some heavy operation on load (for now, just a <code>console.log()</code>).</p>
  
  <p>I have a wrapper, that displays the content via transclusion (<code>my-wrapper.component.html</code>).</p>
  
  <pre><code>&lt;ng-content&gt;&lt;/ng-content&gt;
  </code></pre>
  
  <p>If I set the surroundings up like this, the log statement doesn't show:</p>
  
  <pre><code>&lt;my-wrapper *ngIf="false"&gt;
      &lt;my-component&gt;&lt;/my-component&gt;
  &lt;/my-wrapper&gt;
  </code></pre>
  
  <p>I assume, the <code>my-wrapper</code> component does not get built, so the content is ignored.</p>
  
  <p>But if I try to move the logic into the <code>my-wrapper</code> component like this (<code>my-wrapper.component.html</code>):</p>
  
  <pre><code>&lt;ng-container *ngIf="false"&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>I always see the <code>console.log()</code> output. I guess, the <code>my-component</code> gets built and then stored away until the <code>*ngIf</code> becomes <code>true</code> inside <code>my-wrapper</code>.</p>
  
  <p>The intention was to build a generic "list-item + detail" component. Say I have a list of N overview-elements (<code>my-wrapper</code>), that get rendered in a <code>*ngFor</code> loop. Every of those elements has its own detail component (<code>my-component</code>) that is supposed to load its own data, once I decide to show more infos to a specific item.</p>
  
  <p>overview.html:</p>
  
  <pre><code>&lt;ng-container *ngFor="let item of items"&gt;
      &lt;my-wrapper&gt;
          &lt;my-component id="item.id"&gt;&lt;/my-component&gt;
      &lt;/my-wrapper&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>my-wrapper.component.html:</p>
  
  <pre><code>&lt;div (click)="toggleDetail()"&gt;Click for more&lt;/div&gt;
  &lt;div *ngIf="showDetail"&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to tell Angular, to ignore the transcluded content until it is necessary to be added to the page? Analogously to how it was in AngularJS.</p>