Currently, I am working with a dataset retrieved from an API and dynamically creating checkboxes in my HTML page using the DataView component from PrimeNG.
My objective is to implement a feature where users can select or deselect all checkboxes with a click of a button, and then store their values in an array for further processing.
Below is a snippet of my progress so far:
Component HTML
<p-dataView [value]="requestList" {...} >
<ng-template let-request pTemplate="listItem">
<p-checkbox
name="reqNo"
inputId="reqNo"
(click)="getCheckBoxValue()"
value="{{ request.requestNo }}"
[(ngModel)]="reqNo"
[ngModelOptions]="{ standalone: true }"
></p-checkbox>
</ng-template>
</p-dataview>
Main TS File
reqNo: any; The variable reqNo is linked using ngModel.
When logged to the console, it outputs an array of values:
['R08000036', 'R08000002']
Each object in the API response structure resembles this:
{
requestNo: "R08000036",
requestBy: "SUPER_USER",
requestTs: "2021-02-18T04:27:05.710+0000",
collectTs: "2008-07-30T16:00:00.000+0000",
testReason: "After Visit",
noOfPrisoner: 2,
status: "Printed",
printTs: "2008-07-21T16:00:00.000+0000",
escortingOfficer: "00552",
}
The event handler getCheckBoxValue is as follows:
getCheckBoxValue() {
console.log(this.reqNo);
}
I'm relatively new to Angular and suspect that I might be misusing ngModel. Any guidance on how to correct this would be greatly appreciated!