Using ng-content inside a for loop

[Christophe HOARAU]

Hi,

I would like to know if its possible to define a template(transclusion), then call it inside a for loop in the directive template.

I have tried but it does nothing, no error and no content is generated in my loop.

Here is a sample of the code :

<myComponent>
  <div myTemplateContent>test</div>
</myComponent>

then in "myComponent" code I have :

<div *ngFor="let a of myList">
{{a}}<ng-content select="[myTemplateContent]"></ng-content>

</div>

in this case ng-content renders nothing at all.

Thanks

[Marco Ramos]

Check out https://toddmotto.com/transclusion-in-angular-2-with-ng-content.

I think you want one of the following: (check out https://toddmotto.com/transclusion-in-angular-2-with-ng-content)

<myComponent>
  <div class="myTemplateContent">test</div>
</myComponent>

<div *ngFor="let a of myList">

{{a}}<ng-content select=".myTemplateContent"></ng-content>

</div>

OR

<myComponent>
  <myTemplateContent>test</myTemplateContent>
</myComponent>

[Christophe HOARAU]

Hi,

Thanks but this does not work inside of ngFor, it works great as long as I don't put ng-content inside of the ngFor loop.