CODEWITHSUNDEEP
angular
Nate Radebaugh
Nate Radebaugh

Reputation: 1084

How can I repeat content (aka *ngFor) without a wrapping element?

I have an Angular 4 component that uses what is effectively a 2d array. I have an array of sections which hold an array of links. I want to be able to output them all flatly:

<ul>
  <div *ngFor="let section of all_sections">
    <li *ngFor="let nav of section.links" [class.active]="nav.href === current_url">
    </li>
    <li class="divider"></li>
  </div>
</ul>

How can I force it to do the loops but without the extra wrapping div for the sections? It should just be li tags inside the ul.

Expected output:

<ul>
    <li class="active"></li>
    <li class="active"></li>
    <li class="active"></li>
    <li class="divider"></li>
    <li class="active"></li>
    <li class="active"></li>
    <li class="active"></li>
    <li class="divider"></li>
</ul>

Upvotes: 20

Views: 10119

Answers (1)

Jayakrishnan
Jayakrishnan

Reputation: 4294

you can try using ng-container

<ng-container *ngFor="let section of all_sections;">
 ...
</ng-container>

Upvotes: 43

Related Questions