Get value of checkbox for each row in a table in Angular 15

Question

I want to display a checkbox for each row in a table. The values of the table will be a HTTP Get Request.

sample data

0:{paymentFor: 'P29', paymentPurpose: 'Advance payment', paymentAmount: 1000000, paymentType: 'Payment Schedule', isActiveTrigger: ''}
1: {paymentFor: 'P30', paymentPurpose: 'Advance payment', paymentAmount: 2000000, paymentType: 'Payment Schedule', isActiveTrigger: ''}
2: {paymentFor: 'P31', paymentPurpose: 'Head room', paymentAmount: 310000, paymentType: 'Payment Schedule', isActiveTrigger: '', …}
3: {paymentFor: 'U10', paymentPurpose: 'Mosquoto Mesh', paymentAmount: 60000, paymentType: 'Additional Quotation', isActiveTrigger: ''}
4: {paymentFor: 'U9', paymentPurpose: 'Double door entrance', paymentAmount: 25000, paymentType: 'Additional Quotation', isActiveTrigger: ''}

I need to add or remove the PaymentFor into or from an array, based on the checkbox event

Any thoughts??

Thanks in advance,

Service

import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders, HttpParams,HttpErrorResponse  } from '@angular/common/http';
    import { BehaviorSubject, Observable, Subject, switchMap, tap } from 'rxjs';
    import { environment } from 'src/environments/environment.development';
    @Injectable({
       providedIn: 'root'
    })
    export class PaymentTriggerService {
       constructor(private httpClient:HttpClient) { }
       private _refreshNeeded$ = new Subject<void>();

       get refreshNeeded$(){
          return this._refreshNeeded$;
       }
       GetPaymentSchAndUpgByQuoteHeaderIDForPaymentTrigger(companyID:number,     quoteHeaderID:number):Observable<PaymentTriggerService>{
       let apiURL = environment.netapiurl +    'PaymentTriggers/GetPaymentSchAndUpgByQuoteHeaderIDForPaymentTrigger/' + companyID + '/' + quoteHeaderID
       return this.httpClient.get<PaymentTriggerService>(apiURL) 
         .pipe(
            tap(() => {
            this._refreshNeeded$.next();
            })
         );
      }
     }`

HTML

<div class="row mt-4">
        <div class="col-lg-12">
          <div class="form-group">
                                   
             <label *ngFor="let data of arrGetPaymentSchAndUpgByQuoteHeaderIDForPaymentTrigger"       
               class="form-control">
              <input type="checkbox" name="data"  [(ngModel)]="data.paymentFor"   
                 value]="data.paymentFor"                                   
                   (selectionchange)="getValues(data.paymentFor)" > {{data.paymentFor}}
           </div>  
        </div>
      </div>

Component file

     export class DataEntryComponent implements OnInit{
       arrGetPaymentSchAndUpgByQuoteHeaderIDForPaymentTrigger:any=[]
       getValues(paymentFor:any){
         this.arrAppendAllPaymentForIDs.push(paymentFor)
         console.warn(this.arrAppendAllPaymentForIDs)
       }
       ngOnInit(): void {
      this.paymentTriggerSvc.GetPaymentSchAndUpgByQuoteHeaderIDForPaymentTrigger(this.companyID,      
           this.editQuotationQuoteHeaderID).subscribe((response: any)=>{                             
            this.arrGetPaymentSchAndUpgByQuoteHeaderIDForPaymentTrigger = response 
            console.log(this.arrGetPaymentSchAndUpgByQuoteHeaderIDForPaymentTrigger)

      })
     }

Answer 1

1. Inside your component, define a Set to contain your checked elements :

   public paymentsSet = new Set<TypeOfYourData>();

2. In the HTML (in the table), make the boxes checked if their data is present in this set and call a function if the user checks a box :

        <div *ngFor="let data of yourDataList; let i = index">
          <label class="form-control">
          <input type="checkbox" name="data" [checked]="paymentsSet.has(data)"                                   
          (change)="onPaymentToggle(data.paymentFor)">
          {{data.paymentFor}}
        </div>
   

3. Create the onPaymentToggle function, which adds / remove the elem from the set :

    public onPaymentToggle(payment: TypeOfYourData) {
      if (this.paymentsSet.has(payment)) {
        this.paymentsSet.delete(payment)
      } else {
        this.paymentsSet.add(payment)
      }
    }