angularjs - NgFor ng-content -

this question has answer here:

• can ng-content used inside of ng-for? 1 answer

i trying build hierarchical grid in angular2 n-child grids.

my markup should this

<grid [observable]="users$">     <column key="username" caption="username"></column>     <column key="name" caption="name"></column>      <grid property="usergroups">         <column key="groupno" caption="group-no"></column>             </grid> </grid> 

here component:

@component({     selector: 'grid',     directives: [form_directives, column],     template: `         <table class="table table-grid">             <thead>                 <tr>                     <th *ngif="childgrid"></th>                     <th *ngfor="#col of columns" [attr.key]="col.columnkey">                         {{ col.caption }}                     </th>                 </tr>             </thead>             <tbody>                 <template ngfor #item [ngforof]="data">                                         <tr>                         <td *ngif="childgrid" (click)="setchilddata(item)">                         </td>                         <td *ngfor="#col of columns" [attr.key]="col.columnkey">                             {{ item[col.columnkey] }}                         </td>                     </tr>                     <tr *ngif="childgrid" class="child-container">                         <td></td>                         <td [attr.colspan]="columns.length">                             <ng-content select="grid"></ng-content>                         </td>                     </tr>                 </template>             </tbody>         </table>     ` }) export class grid {      private _initialized: boolean = false;      @input('observable') obs$: observable<any[]>;             @input('property') propertyname: string;      @contentchildren(column, false) columns: querylist<column>;     @contentchildren(grid, true) childs: querylist<grid>;      data: any[] = [];     childgrid(): grid {         if (this.childs.length == 0) return null;          return this.childs.filter(x => x != this)[0];     }     htmlnode: htmlelement;      constructor(elementref: elementref) {         this.htmlnode = <htmlelement>elementref.nativeelement;     }      ngoninit() {         if (this.obs$ != null) this.obs$.subscribe(data => this.data = data);     }      setchilddata(data: any) {         if (data != null && this.childgrid != null) {             var prop = this.childgrid.propertyname;              this.childgrid.data = data[prop]         }     } } 

my problem child-grid gets rendered once. there way render every loop?

if have multiple <ng-content> same selector, content projected first one. design (probably align web-components <content> tag). content can projected once, when several selectors match.