I want to display label text for particular record in for loop

Question

<div ngFor="let data of Requests">
          FirstName:<b>{{data.name}}</b>&nbsp;
          <button (click)="AcceptRequest()">Accept</button>
          <button (click)="CancelRequest()">Decline</button>
          <label>{{RequesStatus}}</label>

I want to display a label on accepting or declining requests for that request only in my code it displays for every request.

Answer 1

Try this, this should work:

<div *ngFor="let item of requests; index as ix">
    ix: {{ix}} FirstName:<b>{{item.name}}</b>&nbsp;
    <button (click)="HandleRequest(true, ix)">Accept</button>
    <button (click)="HandleRequest(false, ix)">Decline</button>
    <label>{{requesStatus[ix]}}</label>

    <!-- or -->
    <label>{{(isAccepted[ix]) ? 'accepted' : 'declined'}}</label>
</div>

In TS

                     // in class level declare this
   requesStatus: string[] = [];
                     // or
   isAccepted: boolean[] = [];

                     // function to set and use in template
   HandleRequest(accepted, ix) {
      this.requesStatus[ix] = (accepted) ? 'accepted' : 'declined';
                     // or
      this.isAccepted[ix] = accepted;
   }