Angular6创建模板并将模板从父组件传递给子组件

Question

I'm pretty new to angular, and am trying to create a custom table component to reuse throughout my application. And I have a simple example working by passing an array of data, and then an array of Column configurations.

My Column config looks like

export interface Column {
  field: string;  
  displayValue?: string;
  cellTemplate?;
}

and then in my TableComponent I build the table based off of the data and array of Columns passed in.

But now I want to try and make it a little more advanced, and be able to pass in the cellTemplate, something like

{
field: 'firstName',
displayValue: 'First Name',
cellTemplate: '<h1>My Name is {{cell}}</h1>
}

And then even a step further and be able to pass an onlclick event from the parent with it...

{
field: 'firstName',
displayValue: 'First Name',
cellTemplate: '<button (click)="parentClick(cell)">Click Me to find out my name</button>'
}
...
parentClick(cell){
alert('My Name is ' + cell);
}
...

But I'm kind of stuck. I've found I can pass a static template like <h1>Hello World</h1> and then use [innerHtml]="cellTemplate" but that's all I can figure out so far

Answer 1

If you want to change template content using an expression or value, you can pass any value from parent component to child component by using @Input. But if you want to pass static template you can use content projection. Pleaes follow this link how to use content projection. https://www.infragistics.com/community/blogs/b/infragistics/posts/simplifying-content-projection-in-angular