Remove divider after last item while using ngFor

Question

I'm using this code to show a number of locations:

<div class="location" *ngFor="let item of location_array">
   {{item}} <hr>
</div>

which results in all the locations, separated by an horizontal rule. How can I edit this to get the exact same result, but without the last horizontal rule?

Answer 1

Use last provided by the *ngFor along with *ngIf on your <hr>:

<div class="location" *ngFor="let item of location_array; let lastItem = last;">
   {{item}} <hr *ngIf="!lastItem">
</div>

Here is a StackBlitz Demo.

Answer 2

In the current angular version (11) the syntax changed to the following:

<div *ngFor="let item of location_array; last as isLast">
    {{ item }} <hr *ngIf="!isLast">
</div>

See https://angular.io/api/common/NgForOf#local-variables