How to insert divider in the `ngFor` in Angular?

Question

I have a subsection and I'm wondering how I can place html divider between every subsection but not sure how to do that so I would be really appreciated if I can get any suggestion or help.

<div>
    <a mat-list-item *ngFor="let subsection of section.subSections" (click)="navigateToSubsection(section.id,subsection.id)">{{subsection.sectionName}}
    </a>
</div>

For example something like this:

Answer 1

You could use <hr> tag to render horizontal lines and *ngFor directive's last local variable to avoid rendering the line after the last item.

Try the following

<div>
  <a *ngFor="let subsection of section.subSections; let last=last"
    (click)="navigateToSubsection(section.id,subsection.id)">
    {{ subsection.sectionName }}
    <hr *ngIf="!last" class="solid">
  </a>
</div>

Working example: Stackblitz

Answer 2

I created a sample for you on Stackblitz

You can use <hr> like this:

<div clas="main-container" *ngFor="let subsection of section.subSections>
   <a mat-list-item"
    (click)="navigateToSubsection(section.id,subsection.id)">{{subsection.sectionName}}
   </a>
   <hr/>
</div>