ng-content not repeating within ngFor

Asked Mar 14 '17 at 10:52

Active Mar 17 '17 at 08:44

Viewed 153 times

While placing <ng-content> within a <div *ngFor=...></div> ,the template comes within the last element of for-loop alone. It does not appear in all the iterated elements.

within my component html ->

<ats-tab [tabOptions]="equipmentTabOptions">
    <ng-container class="tab-body">
        <p>para</p> //content to appear in all the tabs
    </ng-container>
</ats-tab>

within ats-tab.component.html ->

<div class="tab-content">
    <div *ngFor="let item of tabOptions;" [attr.id]="item.id" class="tab-pane fade">
      <ng-content select=".tab-body"></ng-content>
    </div>
</div>

Can someone please help! :(

edited Mar 17 '17 at 08:44

asked Mar 14 '17 at 10:52

Mithun Finidi

1

Not working for me. Got the same issue. Please help! – anusreemn Mar 14 '17 at 10:58
1

can you show us what kind of data you have in tabOptions? – deen Mar 14 '17 at 11:02
1

@ris tabOptions is an array of objects. I will post in a sample below: [ { id: "tab1" }, { id: "tab2" }, { id: "tab3" }, { id: "tab4" } ] – Mithun Finidi Mar 14 '17 at 11:10
1

@RomanC, no it is not! The template doesn't come under every instance within the for loop. I even tried using ngForTemplate instead here, but did not work. – Mithun Finidi Mar 14 '17 at 11:44

ng-content not repeating within ngFor

0 Answers0