it works for me
@Component({
selector: 'app-base-list',
template: `
<ul>
<li *ngFor="let item of data">
<ng-container
[ngTemplateOutlet]="this.tmpl"
[ngTemplateOutletContext]="{ row: item }"
>
</ng-container>
</li>
</ul>
`
})
export class BaseListComponent implements OnInit, AfterViewInit {
@Input() tmpl!: TemplateRef<any>;
data = [
{
code: 'FI-SW-01',
name: 'Koi',
unitcost: 10.0,
status: 'P',
listprice: 36.5,
attr: 'Large',
itemid: 'EST-1',
},
{
code: 'K9-DL-01',
name: 'Dalmation',
unitcost: 12.0,
status: 'P',
listprice: 18.5,
attr: 'Spotted Adult Female',
itemid: 'EST-10',
},
{
code: 'RP-SN-01',
name: 'Rattlesnake',
unitcost: 12.0,
status: 'P',
listprice: 38.5,
attr: 'Venomless',
itemid: 'EST-11',
},
];
constructor() {}
ngOnInit(): void {}
ngAfterViewInit(): void {}
}
@Component({
selector: 'app-my-list',
template: `
<app-base-list [tmpl]="this.tmp1">
<ng-template #tmp1 let-item="row">
<p>{{ item.name }}</p>
</ng-template>
</app-base-list>
`,
})
export class MyListComponent implements OnInit, AfterViewInit {
constructor() {}
ngOnInit(): void {}
ngAfterViewInit(): void {}
}
how can i perform this kind of content projection
@Component({
selector: 'app-base-list02',
template: `
<eui-datagrid [data]="data" style="height:250px">
<ng-container
*ngFor="let item of data"
[ngTemplateOutlet]="this.tmp"
[ngTemplateOutletContext]="{ row: item }"
>
</ng-container>
</eui-datagrid>
`,
})
export class BaseList02Component implements OnInit {
@Input() tmp!: TemplateRef<any>;
data = [
{
code: 'FI-SW-01',
name: 'Koi',
unitcost: 10.0,
status: 'P',
listprice: 36.5,
attr: 'Large',
itemid: 'EST-1',
},
{
code: 'K9-DL-01',
name: 'Dalmation',
unitcost: 12.0,
status: 'P',
listprice: 18.5,
attr: 'Spotted Adult Female',
itemid: 'EST-10',
},
{
code: 'RP-SN-01',
name: 'Rattlesnake',
unitcost: 12.0,
status: 'P',
listprice: 38.5,
attr: 'Venomless',
itemid: 'EST-11',
},
];
constructor() {}
ngOnInit(): void {}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-my-list02',
template: `
<app-base-list02 [tmp]="this.tmp1">
<ng-template #tmp1 let-item="row.item">
<eui-grid-column field="itemid" title="Item ID"></eui-grid-column>
<eui-grid-column field="name" title="Name"></eui-grid-column>
</ng-template>
</app-base-list02>
`,
})
export class MyList02Component implements OnInit {
constructor() {}
ngOnInit(): void {}
}
