title: Get multiple ng-template ref values using contentChildren in angular 5
body: <p>I am trying to pass multiple <code>ng-template</code> to my reusable <code>component</code> (my-table component), content projection. Now I need to get the reference value of each passed <code>ng-template</code> so I can use that value to know, which template is passed for which column. Basically I am creating a reusable table component (on top of Angular material table) where user can pass an separate template for each column.</p>
  <p>Kindly suggest - OR is there a better approach of doing this?</p>
  <p><strong>temp.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, ContentChildren, QueryList, TemplateRef, AfterContentInit } from '@angular/core';
  
  @Component({
    selector: 'my-table',
    template: `&lt;h1&gt;This is the temp component&lt;/h1&gt;`,
    styleUrls: ['./temp.component.scss']
  })
  export class TempComponent implements OnInit, AfterContentInit {
  
    constructor() { }
  
    @ContentChildren(TemplateRef) tempList: QueryList&lt;TemplateRef&lt;any&gt;&gt;;
  
    ngOnInit() {
    }
  
    ngAfterContentInit() {
        console.log('template list');
        console.log(this.tempList);
    }
  }
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;my-table&gt;
      &lt;ng-template #column1 let-company let-func=&quot;func&quot;&gt;
          &lt;h1&gt;this template is for column 1&lt;/h1&gt;
      &lt;/ng-template&gt;
      &lt;ng-template #column2 let-company let-func=&quot;func&quot;&gt;
          &lt;h1&gt;this template is for column 2&lt;/h1&gt;
      &lt;/ng-template&gt;
  &lt;/my-table&gt;
  </code></pre>
  <p>I can create directive for each column, but than no of column might change so directive route will not work. I am thinking that, component user will pass each column template with template ref value as column header value, for example, if user is passing an <code>ng-template</code> for &quot;firstName&quot; column, it should be like ,</p>
  <pre class="lang-html prettyprint-override"><code> &lt;ng-template #firstName let-firstname&gt;
       &lt;h1&gt;this template is for column firstName&lt;/h1&gt;
   &lt;/ng-template&gt; 
  </code></pre>
  <p>And I need a way to get all the provided <code>ng-template</code> with their ref so I can know, which template belongs to which column.</p>