Enumerate API information in Angular

Question

I have an html code at the angle with information coming from the API. I would like to enumerate this list according to your quantity without creating an id in the bank.

Example:

1 nameDocarro1, Dono1, descricao1

2 nameDocarro2, Dono2, descricao2

3 nameDocarro3, Dono3, descricao3

I wanted to add the numbers 1.2.3 to the list for example, and as far as you have more information coming from the API, you would have more numbers ordering.

  <div *ngFor="let carros of carro" class="margin-bottom-20 width-100-l">
    <div class="historico-titulo">
        <div class="nome-carro">
            {{carros .nome}} <br />
        </div>
        <div class="carro-dono" >
            <strong>{{carros.dono.toUpperCase()}}</strong>
        </div>
    </div>
    <div class="texto">
        <span>{{carros .texto}}</span>
    </div>
</div>

Answer 1

You can use your own content *ngFor to add the numbering:

<div
  *ngFor="let carros of carro ; let iCarro = index"
  class="margin-bottom-20 width-100-l"
>
  <div class="historico-titulo">
    <div class="nome-carro">{{carros .nome}} {{ iCarro }} <br /></div>
    <div class="carro-dono">
      <strong> {{carros.dono.toUpperCase()}} {{ iCarro }}</strong>
    </div>
  </div>
  <div class="texto">
    <span>{{carros .texto}} {{ iCarro }}</span>
  </div>
</div>

Since the index starts at 0, if you want your numbering to start at 1, add
{{ iCarro + 1 }}