How to show a loading only on the element on which it was clicked

Question

I have the following repeat structure:

<div *ngFor="let notificacao of notificacoes; let i = index">
   {{notificacao.marketplace}}
   {{notificacao.data_entrada | date:'dd/MM/yyyy'}} 
   {{notificacao.data_entrada | date:'shortTime'}}
   <h6><strong>{{notificacao.mensagem}}</strong>
      <i *ngIf="loading" class="fa fa-spinner fa-spin ml-2"></i>
      <svg *ngIf="!loading" (click)="testaLoadingExclusao(notificacao.identificador, i)">
      </svg>
   </h6>
</div>

my job testaLoadingExclusao()

testaLoadingExclusao(identificador, index){
    this.loading = true;
}

I would like the loading to appear only on the element I clicked, currently the loading icon is shown on all items of my listing when I click on svg.

Answer 1

Do it like this:

this.notificacoes= notificacoes.map(obj = > { obj.loading=false; return obj; });


testaLoadingExclusao(notificacao){
    notificacao.loading = true;
}

and in html

 <div *ngFor="let notificacao of notificacoes; let i = index">
       {{notificacao.marketplace}}
       {{notificacao.data_entrada | date:'dd/MM/yyyy'}} 
       {{notificacao.data_entrada | date:'shortTime'}}
       <h6><strong>{{notificacao.mensagem}}</strong>
          <i *ngIf="notificacao.loading" class="fa fa-spinner fa-spin ml-2"></i>
          <svg *ngIf="!notificacao.loading" (click)="testaLoadingExclusao(notificacao)">
          </svg>
       </h6>
    </div>