Menu
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>
763
Introduction. *ngFor is a predefined directive in Angular. It accepts an array to iterate data over atemplate to replicate the template with different data. It's the same as the forEach() method in JavaScript, which also iterates over an array.
Angular allows us to use a variety of useful directives. One of the most basic and common is ngFor which is an implementation of a for loop . ngFor is designed to work with collections. Since we have a collection of events let's see how to use the ngFor directive in our code.
To Use ngFor directive, you have to create a block of HTML elements, which can display a single item of the items collection. After that you can use the ngFor directive to tell angular to repeat that block of HTML elements for each item in the list.
you can try using ng-container
<ng-container *ngFor="let section of all_sections;">
...
</ng-container>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
