title: Display component's content from @ContentChildren in multiple rows using *ngFor on Angular 2
body: <p>I'm trying to write a simple list view (grid view?) with multiple columns using Angular 2 that I can instantiate this way:</p>
  
  <pre><code>&lt;file-list [items]="items"&gt;
      &lt;file-list-column title="Id" field="id"&gt;&lt;/file-list-column&gt;
      &lt;file-list-column title="Name" field="name"&gt;&lt;/file-list-column&gt;
  &lt;/file-list&gt;
  </code></pre>
  
  <p>I actually managed to make this work in a very hacky way, it generates a table with the information data I set in the FileListColumn component.</p>
  
  <p>This is what I have at the moment:</p>
  
  <p><strong>FileListColumn</strong> component, where the column metadata is defined:</p>
  
  <pre><code>import {Component, Input, TemplateRef, ViewChild} from '@angular/core';
  
  @Component({
      selector: 'file-list-column',
      template: ''
  })
  export class FileListColumn {
      @Input()
      public title: string;
      @Input()
      public field: string;
  
      ngOnInit() {
      }
  }
  </code></pre>
  
  <p><strong>FileList</strong> component, this is the main component for the list view:</p>
  
  <pre><code>import {Component, Input, ContentChildren, QueryList, AfterContentInit, forwardRef} from '@angular/core';
  import {FileListColumn} from './file.list.column';
  import {IItem} from 'models';
  @Component({
      selector: 'file-list',
      template: require('./file.list.html')
  })
  export class FileList implements AfterContentInit {
      @ContentChildren(forwardRef(() =&gt; FileListColumn))
      public columns: QueryList&lt;FileListColumn&gt;;
  
      @Input()
      public items: IItem[];
  
      constructor() {
      }
  
      public ngAfterContentInit() {
      }
  
      public getProperty(item:{[key:string]:any}, name:string) {
          return item[name];
      }
  }
  </code></pre>
  
  <p><strong>This</strong> this is the view for the <code>FileList</code> component:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th *ngFor="let col of columns"&gt;
                  {{col.title}}
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let item of items"&gt;
              &lt;td *ngFor="let col of columns"&gt;
                  {{getProperty(item, col.field)}}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The hacky thing I mentioned is that, the way it works, for each column of each item, the only thing it does is that it calls the getProperty function passing the item and the field name and returns the value of that field, which is a less than ideal solution.</p>
  
  <p>What I want to be able to do now is to be to set content in my columns the way shown below and have that content shown in my table:</p>
  
  <pre><code>&lt;file-list [items]="items"&gt;
      &lt;file-list-column title="Id" field="id"&gt;&lt;/file-list-column&gt;
      &lt;file-list-column title="Name"&gt;
          &lt;span&gt;{{$item.name}}&lt;/span&gt;
      &lt;/file-list-column&gt;
      &lt;file-list-column title="Some other column"&gt;
          &lt;some-component item="$item"&gt;&lt;/some-component&gt;
      &lt;/file-list-column&gt;
  &lt;/file-list&gt;
  </code></pre>
  
  <p>Not only that, but I also want to be able to define the html for the column in the <code>FileListColumn</code> component itself in order to keep the code a bit more organized.</p>
  
  <p>One of the things I tried was to add a template in the view of the <code>FileListColumn</code> component:</p>
  
  <pre><code>&lt;template #columnTemplate&gt;
      &lt;span&gt;text to see if worked&lt;/span&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Then I tried to get its reference in the <code>FileListColumn</code> component with:
  <code>@ViewChild('columnTemplate') columnTemplate: TemplateRef&lt;any&gt;;</code></p>
  
  <p>And then I tried to load it in the view of the <code>FileList</code> component by using:</p>
  
  <pre><code>&lt;td *ngFor="let col of columns" *ngForTemplate="col.columnTemplate"&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>But I get an error on the browser saying:</p>
  
  <pre><code>Error: Template parse errors:(…) "Error: Template parse errors:
  Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("
      &lt;tbody&gt;
          &lt;tr *ngFor="let item of items"&gt;
              &lt;td *ngFor="let col of columns" [ERROR -&gt;]*ngForTemplate="col.columnTemplate"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  "): FileList@10:44
  </code></pre>
  
  <p>Even if this worked, I wouldn't have any idea on how to actually bind the item in my items array to the <code>FileListColumn</code> content.</p>
  
  <p>Does anyone have an idea on how I can achieve those things? </p>
  
  <p>I have been looking into a way solve this problem all day but I couldn't find anything useful, most tutorials are irrelevant as they were written for old betas of Angular 2 using older APIs.</p>
  
  <p>Thanks in advance for the help and sorry for the long post.</p>
  
  <p><strong>Update 1:</strong></p>
  
  <p>So, I managed to load the template from <code>FileListColumn</code> inside of the <code>&lt;td&gt;</code> in the <code>FileList</code> using the #columnTemplate attempt by doing this based on one of Günter Zöchbauer's links:</p>
  
  <pre><code>&lt;tr *ngFor="let item of items"&gt;
      &lt;td *ngFor="let col of columns"&gt;
          &lt;template [ngTemplateOutlet]="col.columnTemplate" [ngOutletContext]="item"&gt;&lt;/template&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The template is loaded inside every single cel but there are still <strong>two problems</strong>:</p>
  
  <ul>
  <li>The only properties I can access from the template are the column properties, I have no access to the item properties from the outer <code>ngFor</code>.</li>
  <li>When I add content to the <code>FileListColumn</code> by doing <code>&lt;file-list-column&gt;&lt;div&gt;Content here&lt;/div&gt;&lt;/file-list-column&gt;</code> to be loaded in the <code>&lt;ng-content&gt;</code> of the column's template, this content is only showed in the <strong>last</strong> row, meaning it's not repeated in all rows.</li>
  </ul>