After retrieving data from getListOfCurrentSubtenants and displaying it as shown in the screenshot, users have the ability to select items by clicking on checkboxes. How can we capture all the selected data into a single object?
For example, if a user checks 5 boxes, the result should be an array of objects containing all the selected items.
Sample Object:
[
{
"subtenantName": "Urgent Care MSO, LLC",
"currentLeaseExpiration": "04/30/2023"
},
{
"subtenantName": "Laboratory Corporation of America",
"currentLeaseExpiration": "10/10/2028"
}
]
HTML Code:
<div *ngIf="currentSubtenants.length > 0" class="deal-form-header-labels" style="padding-top: 5px;">Current Subtenants</div>
<div *ngFor="let subtenant of currentSubtenants; let i = index;" class="subtenant-form-btn-group">
<div class="deal-form-btn-group-radio" fxLayout="row" fxLayoutAlign="space-between center" >
<div class="pharmacy-checkbox">
<mat-checkbox
color="primary"
[(ngModel)]="dealDispositionFormFields.currentSubtenants"
(change)="changeCurrentSubtenants($event,subtenant)"
style="margin-left:10px;">
<div class="deal-text-label">
{{subtenant.subtenantName}}
</div>
</mat-checkbox>
</div>
</div>
<div >
<div class="flex-column">
<mat-label>Current Lease Expiration</mat-label>
<div class="property-assignments-email secondary-text">{{subtenant.currentLeaseExpiration}}</div>
</div>
</div>
</div>
</div>
JavaScript Function:
changeCurrentSubtenants(e:any,rowData:any){
if(e.checked){
console.log("rowData" , rowData)
}
}
getListOfCurrentSubtenants() {
this.partnerRoleIsInProgress = true;
this._dealService.getCurrentSubtenants(this.transactionData.propertyId)
.pipe(
finalize(() => this.partnerRoleIsInProgress = false),
).subscribe({
next: (res) => {
if (res.isSuccess) {
this.currentSubtenants = res.data;
console.log("res" , this.currentSubtenants)
}
},
error: err => this._notificationService.showError(err),
complete: noop
});
}