title: Conditionally display child component and its content within parent component
body: <p>I'd like to conditionally display a child component (including its ContentChildren) within a parent component's template.</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;parent&gt;
    &lt;child #initial&gt;
      &lt;span&gt;Player&lt;/span&gt;
    &lt;/child&gt;
    &lt;child label="Intro"&gt;
      &lt;span&gt;Intro&lt;/span&gt;
    &lt;/child&gt;
    &lt;child label="Content"&gt;
      &lt;span&gt;Content&lt;/span&gt;
    &lt;/child&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p><strong>desired result</strong></p>
  
  <pre><code>&lt;parent&gt;
    &lt;child&gt;
      &lt;span&gt;Player&lt;/span&gt;
    &lt;/child&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p><strong>parent.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'parent',
    template: `&lt;!--Display {{current}} and its ContentChildren--&gt;`,
    styleUrls: ['./tabs.component.scss']
  })
  
  export class ParentComponent implements OnInit {
    @ContentChildren(ChildComponent) childs;
    @ContentChild("initial") initial;
    @ContentChild("open") current;
    ngOnInit(): void {
      if (this.initial) this.current = this.initial;
    }
  }
  </code></pre>
  
  <p><strong>child.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'child',
    template: `&lt;ng-content&gt;&lt;/ng-content&gt;`,
  })
  
  export class ChildComponent {
    @Input() label: string;
  }
  </code></pre>
  
  <p><strong>Attempt for parent.component.html</strong></p>
  
  <pre><code>&lt;ng-container *ngFor="let child in childs"&gt;
    &lt;child *ngIf="child == current"&gt;&lt;/child&gt; //ContentChildren as defined in 'app.component.html' are lost now 
  &lt;/ng-container&gt;
  </code></pre>