How to pass a custom (html) template to child component via parent component in angular 2?

Question

        <grid
            [data]="sortedDeviceList"
            [multiSelect]="false"
            [enableSort]="true"
            [rowTemplate]="">
        </grid>

I want to pass a HTML template to the rowTemplate property. And the template will look like this.

<div> 
 <div>{{item.id}}</div>
 <div>{{item.name}}</div>
</div>

The grid template look likes this.

<div *ngFor="let item in data">
// template should appear here.
</div>

How to do this?

Answer 1

@Component({
  selector: 'grid'
  template: `
<div *ngFor="let item in data" *ngForTemplate="templateRef" *ngOutletContext="{$implicit: data}">
</div>`
})
export class GridComponent {
  @Input() data:any[];
  constructor(private templateRef:TemplateRef) {}
}

and use it like

<template #myTemplate>
  <div> 
   <div>{{item.id}}</div>
   <div>{{item.name}}</div>
  </div>
</template

See also

• Angular2 child component as data
• How to pass an expression to a component as an input in Angular2?