title: How to filter @ContentChildren in Angular components
body: <p>I want to create a component that can be used as follow : </p>
  
  <pre><code>&lt;slides (close)="doSomething()"&gt;
    &lt;slide&gt;
      &lt;header&gt;Slide title&lt;/header&gt;
      &lt;main&gt;Slide content (any html)&lt;/main&gt;
    &lt;/slide&gt;
    &lt;slide&gt;
      &lt;header&gt;Slide 2 title&lt;/header&gt;
      &lt;main&gt;...&lt;/main&gt;
    &lt;/slide&gt;
    ...
  &lt;/slides&gt;
  </code></pre>
  
  <p>Then only one slide is displayed and you can navigate back and forth. To me, the SlidesComponent should orchestrate the individual SlideComponents. And SlideComponent should know very little and could very well be replaced by plain HTML.</p>
  
  <p>My problem is that I can't find a proper way to filter the <code>&lt;slide&gt;</code> to only display one at a time.</p>
  
  <p>My first guess was to use the @ContentChildren DOM query and then somehow filter out the content to only output in the DOM one slide at a time. </p>
  
  <p>I used <code>@ContentChildren(SlideComponent) slides: QueryList&lt;SlideComponent&gt;;</code></p>
  
  <p>It does provide me with the collection of the projected SlideComponents. But, I did not find a way to reuse a component's EmbeddedView to simply 'mount' it programatically.</p>
  
  <p>My only success so far has been to set a property on each SlideComponent and rely on a <code>*ngIf</code> directive to output nothing, from the SlideComponent's template, when the property is false. It doesn't sound very right.</p>
  
  <p>I seem to either be wrong on the approach, or be missing key concepts about content projection, DOM Queries or EmbeddedViews.</p>
  
  <p>Your comments and suggestions are very welcomed. Thanks !</p>