Question 197684 in Html Question posted in
Some basic documentation can be found here.

Html – Adding line break to an *ngIf that's inside an *ngFor

If I use an *ngFor like this:

<ng-container  *ngFor="let row of moreInfoData.errorInformationArray; let i = index"  >
  {{row.ErrorCode}}   <br>
</ng-container>

It displays:

Error1
Error2

But I want to check first to see if row.ErrorCode exists. So I’m trying to use this:

<ng-container  *ngFor="let row of moreInfoData.errorInformationArray; let i = index"  >
    <span *ngIf="row.ErrorCode; else noErrorCode">
      {{row.ErrorCode}}   <br>
    </span>

    <ng-template #noErrorCode>N/A</ng-template>
</ng-container>

In this case it displays:

Error1Error2

What am I doing wrong in the second case and how can I get line breaks between the two Error Codes like the first case?

Tags:

2

Answers


  1. 0
    • Put the line break outside of the span tag. This is not valid html
    • Put the #noErrorCode before the span, as it’s trying to refer to something not yet defined there.
    Login or Signup to reply.
  2. 0

    As an option you can do it using unordered list:

      <ul>
    <ng-container  *ngFor="let row of moreInfoData.errorInformationArray; let i = index"  >
      <li *ngIf="row.ErrorCode; else noErrorCode">
        {{row.ErrorCode}}
      </li>

      <ng-template #noErrorCode>N/A</ng-template>
    </ng-container>
  </ul>

    And in your styles put this to hide the dots:

    li { list-style-type: none; }

    Working example: https://stackblitz.com/edit/stackblitz-starters-4xzbvr?file=src%2Fmain.ts

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search