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:

Does this answer your question? [horizontal line and right way to code it in html, css](https://stackoverflow.com/questions/14821087/horizontal-line-and-right-way-to-code-it-in-html-css) — Heretic Monkey, Sep 21 '20 at 20:02

score 7 · Accepted Answer · answered Sep 21 '20 at 20:15

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

ng-hobby · Answer 2 · 2020-09-21T20:04:52.533

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>

edited Sep 21 '20 at 20:04

answered Sep 21 '20 at 19:49

ng-hobby

2,077
2
13
26

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

2 Answers2