CODEWITHSUNDEEP
angulardividerangular-ngfor
user9436741
user9436741

Reputation:

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

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:

enter image description here

Upvotes: 3

Views: 2620

Answers (2)

Barremian
Barremian

Reputation: 31105

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

Upvotes: 8

ng-hobby
ng-hobby

Reputation: 2199

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>

Upvotes: 1

Related Questions