nested loop that should display in a table

I want to create an HTML table and display data for each country (PAYS_LIB).

I want to obtain this result:

<th>COUNTRY:</th>
BELGIUM
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

For now, I have this:

<th>COUNTRY:</th>
BELGIUM
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

I'm not familiar with nested loops...

Here is an idea of the JSON

REGROUPEMENT = [
    {
      TYPEVALUE: 11,
      ASSETCATLABEL: 'Actions individuelles',
      CURRENCY: 'EUR',
      AMOUNT: 1646956.5,
      PERCENTAGE: 79.22,
      ELEMENT: [
        {
          LABEL: 'AB INBEV',
          PAYS_LIB: 'BELGIUM',
          ISINCODE: 'NO0010571698',
        },
        {
          LABEL: 'WWI',
          PAYS_LIB: 'FRENCH',
          ISINCODE: 'AO0010571614',
        },
      ],
    },
  ];

And my code

<div class="container text-center ">
    <h2 class="pt-3 pb-3">HTML Table</h2>

<table *ngFor="let item of REGROUPEMENT">
  <tr>
    <th>TYPE</th>
    <th>PRICE</th>
  </tr>
  <tr >
    <td>{{ item.ASSETCATLABEL }}</td>
    <td>{{ item.AMOUNT }}</td>
  </tr>

  <tr>
    <th colspan="3">COUNTRY</th>
  </tr>
  <tr *ngFor="let elem of item.ELEMENT">
    <td  colspan="3"> {{ elem.PAYS_LIB }} </td>

  </tr>

  <tr>
    <th>LABEL</th>
    <th>ISINCODE</th>
  </tr>

  <tr *ngFor="let elem of item.ELEMENT">
    <td> {{ elem.LABEL}}</td>
    <td> {{ elem.ISINCODE}}</td>
  </tr>

</table>

</div>

I also created a reproduction => https://stackblitz.com/edit/github-z6v4p8?file=src/app/todo/todo.component.ts

If this is the result you want:

Then your template should look like:

<table *ngFor="let item of REGROUPEMENT">
    <tr>
        <th>TYPE</th>
        <th>PRICE</th>
    </tr>
    <tr>
        <td>{{ item.ASSETCATLABEL }}</td>
        <td>{{ item.AMOUNT }}</td>
    </tr>
    <tr>
        <th colspan="2">COUNTRY</th>
    </tr>
    <ng-container *ngFor="let elem of item.ELEMENT">
        <tr>
          <td colspan=2>{{ elem.PAYS_LIB }}</td>
        </tr>
        <tr>
            <th>LABEL</th>
            <th>ISINCODE</th>
        </tr>
        <tr>
            <td>{{ elem.LABEL }}</td>
            <td>{{ elem.ISINCODE }}</td>
        </tr>
    </ng-container>
</table>

In this approach, we used the *ngFor attribute on ng-container. Basically, this tells Angular to repeat all that's inside ng-container, excluding the <ng-container/> tag itself. Then with the use of colspan=2, we "stretch" columns with no siblings to better align with the whole table, resulting in the table in the screenshot above.

I am presuming that your desired result is missing a <th> before French.

Based on this presumption, the usage of an ng-container would solved your problem.

<ng-container *ngFor="let elem of item.ELEMENT">
  <tr >
  <th colspan="3">COUNTRY</th>
</tr>
<tr>
  <td  colspan="3"> {{ elem.PAYS_LIB }} </td>
</tr>

<tr>
  <th>LABEL</th>
  <th>ISINCODE</th>
</tr>

<tr *ngFor="let elem of item.ELEMENT">
  <td> {{ elem.LABEL}}</td>
  <td> {{ elem.ISINCODE}}</td>
</tr>
</ng-container>

Here is a fork of your example.

Bienvenue à Stack Overflow!

I think you just want all the data in a 3-column table?

Just move the references to <td> {{ elem.LABEL}}</td> and <td> {{ elem.LABEL}}</td> to within the first loop, like this.

    <div class="container text-center ">
    <h2 class="pt-3 pb-3">HTML Table</h2>

<table *ngFor="let item of REGROUPEMENT">
  <tr>
    <th>TYPE</th>
    <th>PRICE</th>
  </tr>
  <tr >
    <td>{{ item.ASSETCATLABEL }}</td>
    <td>{{ item.AMOUNT }}</td>
  </tr>

  <tr>
    <th>COUNTRY</th>
    <th>LABEL</th>
    <th>ISINCODE</th>
  </tr>
  <tr *ngFor="let elem of item.ELEMENT">
    <td> {{ elem.PAYS_LIB }} </td>
    <td> {{ elem.LABEL}}</td>
    <td> {{ elem.ISINCODE}}</td>
  </tr>
</table>
</div>

This gives a table like this:

COUNTRY	    LABEL	    ISINCODE
BELGIUM	    AB INBEV	NO0010571698
FRENCH	    WWI	        AO0010571614

I can't be certain of that being what you want, because I am unsure how to interpret your question. You say:

<th>COUNTRY:</th>
BELGIUM
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

... but surely you would want BELGIUM to be inside a pair of tags, e.g. <td>BELGIUM</td>? And would you really want a heading row, then a data row, and then another heading row, all within the same table? That is a little unusual.

So I have used my imagination to guess what you wanted.

It is possible that you want to group all the BELGIUM items together, in one table, and then all the FRENCH ones, in another table. However, if that is the case please show an explicit example of what you want, with tags around each piece of output text.