title: Angular ContentChildren get directive Inputs and TemplateRef
body: <p>I am trying to get <code>TemplateRef</code> for <code>ng-template</code> and <code>input</code> parameters.<br>
  app.component.html:</p>
  
  <pre><code>&lt;my-parent&gt;
      &lt;ng-template my-directive title="Title1" let-dataItem="dataItem"&gt;
          &lt;div&gt;{{dataItem|json}}&lt;/div&gt;
      &lt;/ng-template&gt;
  &lt;/my-parent&gt;
  </code></pre>
  
  <p>Problem is I can get only <code>TemplateRef</code> (title is undefined):<br>
  my-parent.html:</p>
  
  <pre><code>&lt;div *ngFor="let detail of details" [title]="detail.title"&gt; //!!! detail.title is undefined
    &lt;ng-container *ngTemplateOutlet="detail;context:{dataItem: dataItem}"&gt;&lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my-parent.ts</p>
  
  <pre><code>@ContentChildren(MyDirective, { read: TemplateRef }) details: QueryList&lt;MyDirective&gt;;
  </code></pre>
  
  <p>Or I can get Input parameters:<br>
  my-parent.ts</p>
  
  <pre><code>@ContentChildren(MyDirective) details: QueryList&lt;MyDirective&gt;;   
  
  //in html detail.title is defined, but detail is not template and I get exception in line 
  &lt;ng-container *ngTemplateOutlet="detail;context:{dataItem: dataItem}"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>Exception:</p>
  
  <pre><code>TypeError: templateRef.createEmbeddedView is not a function
  </code></pre>
  
  <p>I think I need this version of ContentChildren:</p>
  
  <pre><code>@ContentChildren(MyDirective, { read: TemplateRef }) details: QueryList&lt;MyDirective&gt;;
  </code></pre>
  
  <p>but how can I get <code>MyDirective</code> input parameter (<code>title</code> in this case)?</p>
  
  <p>I know I can use both:</p>
  
  <pre><code>@ContentChildren(MyDirective, { read: TemplateRef }) detailsRefs: QueryList&lt;MyDirective&gt;;
  @ContentChildren(MyDirective) detailsInputs: QueryList&lt;MyDirective&gt;;
  </code></pre>
  
  <p>And then merge it into new array:</p>
  
  <pre><code>public ngAfterViewInit(): void
  {
    const refs = this.detailsRefs.toArray();
    const inputs = this.detailsInputs.toArray();
    for (let i = 0; i &lt; inputs.length; i++)
      this.details.push({templateRef: refs[i], inputs: inputs[i]});
  }
  </code></pre>
  
  <p>But sure there is a better way.</p>