Add <hr> after every two elements in Angular 2 * ngFor
I have the following ngFor code that goes through an object.
<a *ngFor="let pictures of picturesData" href="">
<img [src]="pictures.img" alt="">
</a>
I want to display <hr>
after every 2 <a>
tags (but not after the last 2) to get an output similar to the following:
<a href=""><img /></a>
<a href=""><img /></a>
<hr>
<a href=""><img /></a>
<a href=""><img /></a>
<hr>
<a href=""><img /></a>
<a href=""><img /></a>
How can i do this? Please help me.
+3
source to share
1 answer
Use property ngFor
odd
and ng-container
<ng-container *ngFor="let pictures of picturesData; let odd=odd">
<a href="">
<img [src]="pictures.img" alt="">
</a>
<hr *ngIf='odd'>
</ng-container>
+4
source to share