Can an ng-content be used inside of an ngFor?
Yes, it will not give you proper result. But this can be achieved by ng-template
and TemplateRef
.
I have made a demo. You can see the demo that may help.
child.component.html
<li *ngFor="let rowDetail of dataSource">
<ng-container
*ngIf="headerTemplateRef"
[ngTemplateOutlet]="headerTemplateRef"
[ngTemplateOutletContext]="{$implicit:rowDetail}"
>
</ng-container>
</li>
child.component.ts
@ContentChild('header',{static: false}) headerTemplateRef: TemplateRef<any>;
parent.component.html
<child-app [data]="data">
<ng-template let-rowDetail #header>
<div style="padding-left:35px;">
<div>{{rowDetail.name}}</div>
</div>
</ng-template>
</child-app>
It is possible but probably doesn't produce the desired result. Children passed by the parent can only projected once (no matter how many <ng-content>
are there. If the <ng-content>
elements don't select specific and different parts of the passed children using the select
attribute, then everything is projected to the first <ng-content>
with the default selector (none).
To make this work you probably want a custom ngFor
that repeats the content passed to <ng-content>
.
NgFor
s ngForTemplate
might help in your use case.
See also Angular2 child component as data