47

We'd like to put a ng-content inside of an *ngFor and then specify the contents of the ng-content when the component containing the ngFor is used. Is it possible?

<li *ngFor="let data of dataSource">
  <ng-content></ng-content>
</li>

Demo

Vega
  • 27,856
  • 27
  • 95
  • 103
Eric H
  • 1,759
  • 1
  • 11
  • 14

2 Answers2

35

It is possible, but it will not give you the proper result. What you want can be achieved using ng-template and TemplateRef.

I have made a demo that might help you.

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>
Braden Weber
  • 19
  • 3
Tushar Ghosh
  • 942
  • 1
  • 12
  • 18
  • 4
    Thank you so much, this is exactly the solution I was looking for, would you mind to explain how all this works? – Gilbert R. Jun 11 '20 at 17:42
  • 1
    Thank you so much, this is best solution I've seen so far. I wanted to give default template, if no content provided by the parent. – Luki Centuri Sep 09 '21 at 14:48
21

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>.

NgFors ngForTemplate might help in your use case.

See also Angular2 child component as data

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567