title: Angular 4 - how do I get access to nested components inside a template?
body: <p>I have a hierarchy of components:</p>
  
  <pre class="lang-ts prettyprint-override"><code>App
  |
  Child
  |
  Input
  </code></pre>
  
  <p>The component "Child" accepts a template from it's parent like this:</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;my-child&gt;
      &lt;ng-template&gt;
          &lt;my-input&gt;&lt;/my-input&gt;
          &lt;span&gt;asdasdas&lt;/span&gt;
          &lt;my-input&gt;&lt;/my-input&gt;
          &lt;my-input&gt;&lt;/my-input&gt;
      &lt;/ng-template&gt;    
  &lt;/my-child&gt;   
  </code></pre>
  
  <p>As you can see in the template there's a number of input components. Now <strong>I would like to get an access to the list of <code>&lt;my-input&gt;</code> components from the child component.</strong> What I tried now was to use the @ContentChildren/@ViewChildren, but it doesn't seem to work. The code of Child component:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'my-child',
    providers: [],
    template: `
      &lt;div&gt;
        &lt;ng-template [ngTemplateOutlet]="inputTemplate" #input&gt;&lt;/ng-template&gt;
      &lt;/div&gt;
    `,
    directives: []
  })
  
  export class Child implements OnInit, OnAfterViewInit {
  
    @ContentChild(TemplateRef) inputTemplate: TemplateRef&lt;any&gt;;
  
    @ViewChildren(InputComponent) inputComponents : QueryList&lt;InputComponent&gt;;
  
    constructor() {
  
    }
  
    ngAfterViewInit(){
      //THIS SHOULD NOT BE EMPTY
      console.log(this.inputComponents.toArray());
    }
  }
  </code></pre>
  
  <p>Please let me know what I'm doing wrong and how/if it is possible to get a list of InputComponents from the Child component.</p>
  
  <p>Maybe I shouldn't be using a template here at all? Is there any other way to make this control customisable and still be able to access a list of nested InputComponents?</p>
  
  <p>In case you want to play with it <a href="http://plnkr.co/edit/Lm0KSpjO2kwjKxlrdmfO?p=preview" rel="noreferrer">here's the plunker</a> </p>