how to add horizontal line between text

Issue

Night now I have two text response from my backend and I’m wondering how can I make look like the design below. I’m not sure if that might be possible but any suggestion or help will be really appreciated.

I just wanna add automatically a horizontal line to separate text if there are two or more broadcast instead of showing on the same line like right now(pic).

    <mat-card class="alert" *ngIf="broadcastNotifications?.length">
      <mat-card-title *ngFor="let broadcast of broadcastNotifications">
          <p style="font-size: 15px; color: black; margin-top: 25px;">{{broadcast.message}}</p>
      </mat-card-title>
    </mat-card>
    this.notificationService.getNotification().subscribe((response: any) => {
      if(response && response.length){
        const alerts = response.filter(el => el.notificationType === 2);
        this.broadcastNotifications = response.filter(el => el.notificationType === 1);
        if(alerts.length){
          this.dialog.open(ReleaseDialogComponent, {
            data : {notifications: alerts}
          });
        }
      }
    })

What it look like right now vs what I thinking about doing it.

[![enter image description here][1]][1]

Solution

You can use the <mat-divider> for this purpose.
Move the for loop to an ng-container and add <mat-divider> for all the element which is not the last one.

<mat-card class="alert" *ngIf="broadcastNotifications?.length">
    <ng-container *ngFor="let broadcast of broadcastNotifications; let i = index">
        <mat-card-title>
            <p style="font-size: 15px; color: black; margin-top: 25px;">{{broadcast.message}}</p>
        </mat-card-title>
    <mat-divider *ngIf="broadcastNotifications.length - 1 !== i"></mat-divider>
    </ng-container>
</mat-card>

Example can be found here

Answered By – B45i

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.