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