Select/Unselect and get values of dynamically generated checkbox using ngModel directive in Angular

Question

I have a set of data response from an API and dynamically generating checkboxes on my HTML file using DataView component of PrimeNG.

The goal is to have a functionality where I can select/unselect all checkbox via button click and store their values in an array, for example.

Here's what I have 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; reqNo is binded using ngModel.

Giving me arrays of values when consoled; ['R08000036', 'R08000002']

Each object in the API response looks like 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",
}

getCheckBoxValue event handler;

getCheckBoxValue() {
  console.log(this.reqNo);
}

I'm new to Angular and I think I'm using the ngModel wrong. Can someone please teach me?

Yan Koshelev · Accepted Answer · 2021-09-12 17:11:04Z

2

You can select all values by setting a new value for reqNo by values from requestList.

selectAll() {
  this.reqNo = this.requestList.map(item => item.requestNo);
}
unselectAll() {
  this.reqNo = [];
}

Example

edited Sep 12, 2021 at 17:11

answered Sep 12, 2021 at 16:59

Yan Koshelev

1,1291 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sonson Ixon Over a year ago

Exactly correct. This is exactly what I did. Didnt notice that I only have to add the value binded in the model for the checkbox to be checked. Thanks for the answer anyway. Cheers. :)

Collectives™ on Stack Overflow

Select/Unselect and get values of dynamically generated checkbox using ngModel directive in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related