Displaying content of Component that i fetched with @ContentChildren or @ViewChild
I can suggest you a solution that is used in Angular material library.
- Wrap content of
app-item
component in<ng-template>
tag
item.component.html
<ng-template> <----------------------------- wrapper
<p>
item works!
</p>
<ng-content></ng-content>
</ng-template>
- then we can grab a reference to that
TemplateRef
item.component.ts
@ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
- finally we can use it in a loop of
app-item-list
component
item-list.component.html
<p *ngFor="let item of items">
{{item.order}}
<ng-template [ngTemplateOutlet]="item.template"></ng-template>
</p>
Forked Stackblitz