Loop and HTML table in Angular

Question

I have a problem in my loop... I would like to display the Belgique value once. The variable is called PAYS_LIB.

Here is the JSON file. The path => REGROUPEMENT > ELEMENT > PAYS_LIB.

Below, the Belgique value is created several times. I want the Belgique value to be displayed once, please.

I don't know how to do this???

<ng-container *ngFor="let item of instrument.ELEMENT">
   <ng-container *ngIf="item.PAYS === 1 ">
      <tr style="background-color: #E7BCBC">
         <td colspan="7" style="text-transform: uppercase; font-weight: bold"> {{ item.PAYS_LIB }} </td>
         <td class="text-end item-price"> </td>
         <td class="text-end item-price"> </td>
         <td class="item-price"></td>
         <td class="item-price"></td>
      </tr>
      <tr>
         <td class="text-end"><a [routerLink]="[ '/portfolio/stocks_movement/' + item.SVM] ">{{ item.QUANTITY | cphFormatNum:'1.2-2' }}</a></td>
         <td><a [routerLink]="[ '/markets/details/' + item.SVM] "> {{ item.LABEL }}</a></td>
         <td>{{ item.CURRENCYVALO }}</td>
         ...
      </tr>
   </ng-container>
</ng-container>

Thank you very much

Answer 1

NgForOF provides several exported values, like first, that can be aliased to local variables, and used in the template. first is a boolean that is true when the item is the first of the iterable.

Add first as isFirst to your *ngFor, and an *ngIf="isFirst" on your Belgique row. That should do it.

<ng-container *ngFor="let item of instrument.ELEMENT; first as isFirst">
...
<tr *ngIf="isFirst" style="background-color: #E7BCBC">
...

Check out all the exported values you can use with *ngFor here