Angular - How can I check a checkbox based on values in Array?

Question

I have a form whith these checkboxes, in order to allow users to select multiple 'calibres' of an item:

Those checkboxs are created through ngFor from an array called 'calibres' which have all the possible values, as shown in following code:

component.html

<div >
      <mat-checkbox #checkBox
      *ngFor="let calibre of calibres; let i = index"
      [value]="calibre"
      (change)="getCheckbox()"
      class="example-margin mb-0 mt-1" >{{calibre}}</mat-checkbox>
</div>

getCheckbox() function on component.ts creates an array of those elements checked in my checkbox

  getCheckbox() {

    this.item.calibres = [];
    const checked = this.checkBox.filter(checkbox => checkbox.checked);
    checked.forEach(data => {
         this.item.calibres.push ( data.value );
    });
  }

When I submit the form, this array of checked elemets is stored in Backend for this particular 'item' created by the form, so the stored array will be something like [ 50,60 ]. ONLY checked checkboxes.

What Im trying to do is at the moment of filling the form ( for item 'edit' purposes ) is get checked those checkboxes stored in the array.

How can I achieve that ?

Arun Mohan · Accepted Answer · 2020-05-07 18:50:39Z

2

If you are using a model then this will be very easy and clean.

Say your calibres are of below model

  calibres = [
    {value: 1, isSelected: false},
    {value: 5, isSelected: false},
    {value: 4, isSelected: false}
  ];

When you get an array from backend just check like

backendArray = [2,4];

And a function to check isSelected flags after you fetch data

this.calibres = this.calibres.map(
      (elem) =>{ elem.isSelected = this.backendArray.indexOf(elem.value) != -1 ? true : false;
    return elem});

HTML section use checked attribute. Pass calibre when on change and do your toggle logic to isSelected flag

<div >
      <mat-checkbox #checkBox
      *ngFor="let calibre of calibres"
      [checked]="calibre.isSelected"
      [value]="calibre.value"
      (change)="getCheckbox(calibre)"
      class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox>
</div>

edited May 7, 2020 at 18:50

answered May 7, 2020 at 18:31

Arun Mohan

1,2271 gold badge7 silver badges11 bronze badges

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

2 Comments

Arun Mohan Over a year ago

@Cristian Try a model-driven approach whenever you are manipulating UI with backend. That makes our work easy.

Biax20 Over a year ago

what was the elem for ?

Lasanga Guruge · Accepted Answer · 2020-05-07 19:20:35Z

0

Cant you use attribute [checked]=true in the loop. because you create checkboxes for the items in the array which are filtered by ischecked property. Therefore using this attribute will get your job done

 <mat-checkbox #checkBox
      *ngFor="let calibre of calibres; let i = index"
      [value]="calibre"
      [checked]="true"
      (change)="getCheckbox()"
      class="example-margin mb-0 mt-1" >{{calibre}}</mat-checkbox>

UPDATE:


 getCheckbox() {
     this.item.calibres = this.checkBox.map(checkbox  => {
            return {
               value: checkbox.value,
               isChecked: checkbox.checked
            };
        }); 
  }

<mat-checkbox #checkBox
      *ngFor="let calibre of calibres; let i = index"
      [value]="calibre.value"
      [checked]="calibre.isChecked"
      (change)="getCheckbox()"
      class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox>

edited May 7, 2020 at 19:20

answered May 7, 2020 at 18:33

Lasanga Guruge

8741 gold badge5 silver badges16 bronze badges

3 Comments

Cristian Over a year ago

Hi @Lasanga, thanks for your answer. The thing is i still want the unchecked items available for the user. I need all the checkboxes and just checked those in my array

Lasanga Guruge Over a year ago

Just remove the uncheck filter from your function. Ill update the answer

Cristian Over a year ago

Thanks @Lasanga ! I'll try this too !

Vivek Pandey · Accepted Answer · 2021-10-04 07:40:52Z

0

Hope this might help someone in the future,

I solved this in an easy way with attribute binding and a small function.

Problem: I have an array Ex: Categories = ["a","d"] that has the value of only the selected checkbox, and when the user wants to edit it I have to show the checkbox again with the checkbox already checked.

Solution :

In HTML File - Using attribute binding with a function that checks if the value is present in the array and returns true or false. (You can use *ngFor as well)

  <h3>Category</h3>
  <label><input type="checkbox" [checked]="checkCat('a')">a</label>
  <label><input type="checkbox" [checked]="checkCat('b')">b</label>
  <label><input type="checkbox" [checked]="checkCat('c')">c</label>
  <label><input type="checkbox" [checked]="checkCat('d')">d</label>

Inside the .ts file

cat = ["a","d"]; // checkbox data received from backend

 checkCat(data){
    let ref = this.cat.find(x => x == data); // this checks the cat[] array
    if(ref == data){
      return true;
    } else {
      return false;
    }
   }

answered Oct 4, 2021 at 7:40

Vivek Pandey

374 bronze badges

1 Comment

Hanna Kogut Over a year ago

This is not acceptable solution since binding function to html attribute will make this function to call itself on every ChangeDetection cycle, which can cause a huge issue related to performance.

Collectives™ on Stack Overflow

Angular - How can I check a checkbox based on values in Array?

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related