Add and remove values inside array in change event of checkbox

Question

In my angular application, i am making a checkbox and capturing the checkbox change event and pushing the checked value into array..

Here if we uncheck the checkbox also the obj were pushed to the array..

How to remove the obj from array if uncheck the checkbox..

Html:

<div *ngFor="let item of order; let i = index">
  <input type="checkbox" [id]="item+i" [name]="item"[(ngModel)]="item.Checked" (change)="getCheckboxValues(item)">
   <label [for]="item+i"> {{item}} </label>
</div>

Ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  order = ['One','Two','Three','Four'];

  newArray : any = [];

  //Checkbox Change detecting function
  getCheckboxValues(data) {
    let obj = {
      "order" : data
    }

   // Pushing the object into array
    this.newArray.push(obj);

    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }

}

The thing i have worked out with the above was in the link https://stackblitz.com/edit/angular-9pt9sn

Kindly help me to remove the unchecked values inside the ``newArray```..

This link would help coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular — Kay
– Kay, Commented Nov 26, 2018 at 9:58
@Chellappan, Why bro we can't achieve it like this?? Because i am not going to use form for it and i need to store the values of checked alone.. — Maniraj Murugan
– Maniraj Murugan, Commented Nov 26, 2018 at 9:59
@Chellappan, If its good to use reactive form then please post it as solution bro., I will check for it.. — Maniraj Murugan
– Maniraj Murugan, Commented Nov 26, 2018 at 10:03

Joy Biswas · Accepted Answer · 2018-11-27 09:06:01Z

5

Change to (ngModelChange)="getCheckboxValues($event,item)"

and the function to add if not there and remove if the element exist based on check and uncheck of checkbox

  //Checkbox Change detecting function
  getCheckboxValues(ev, data) {
    let obj = {
      "order" : data
    }

    if(ev.target.checked){
      // Pushing the object into array
      this.newArray.push(obj);

    }else {
      let removeIndex = this.newArray.findIndex(itm => itm.order===data);

      if(removeIndex !== -1)
        this.newArray.splice(removeIndex,1);
    }

    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }

Link https://stackblitz.com/edit/angular-5jamcr

edited Nov 27, 2018 at 9:06

answered Nov 26, 2018 at 9:56

Joy Biswas

6,5371 gold badge26 silver badges50 bronze badges

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

2 Comments

Prashant Pimpale Over a year ago

Is it better use find + indexOf?

Joy Biswas Over a year ago

good point. I remember the use of findIndex which is find+indexOf

Sachila Ranawaka · Accepted Answer · 2018-11-26 09:45:19Z

0

Pass the index along with the object and remove if from the array if the checked status is false;

//Checkbox Change detecting function
 getCheckboxValues(data, index) {
    let obj = {
      "order" : data
    }

    if(!data.Checked){
       this.newArray.splice(index, 1);
    }
    else{

      // Pushing the object into array
      this.newArray.push(obj);
    }


       //Duplicates the obj if we uncheck it
       //How to remove the value from array if we uncheck it
        console.log(this.newArray);
}

<input type="checkbox" [id]="item+i" [name]="item"[(ngModel)]="item.Checked" (change)="getCheckboxValues(item, i)">

answered Nov 26, 2018 at 9:45

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

4 Comments

Maniraj Murugan Over a year ago

I am getting empty array in console.log(this.newArray) if i use the above code (both check and uncheck the checkbox).. Can you make the stackblitz with the above solution??

Leela Venkatesh K Over a year ago

I think you should be using the index while pushing as well. because if I click on 3rd checkbox first then it will be in position 0. Check that. it might be the missing piece

Sachila Ranawaka Over a year ago

@undefined stackblitz.com/edit/…

Maniraj Murugan Over a year ago

Why its not possible without modifying the array named order ?? You have completly modified the array order.. I can not modify it.. I hope you know that those values will be coming from the service.. Here for better understanding i have hardcoded thse..

Prashant Pimpale · Accepted Answer · 2018-11-26 10:47:43Z

0

Try below code:

Change in HTML:

(ngModelChange)="getCheckboxValues($event,item)"  // use ndModelChange event

and in TS:

getCheckboxValues(event, data) {

    // use findIndex method to find the index of checked or unchecked item
    var index = this.newArray.findIndex(x => x.order==data);

    // If checked then push 
    if (event) {
       let obj = {
        "order": data
    }
      // Pushing the object into array
      this.newArray.push(obj);
    }
    else {
      this.newArray.splice(index, 1);
    }
    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }
}

Working StackBlitz

You can read about findIndex and indexOf method here

edited Nov 26, 2018 at 10:47

answered Nov 26, 2018 at 9:51

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

5 Comments

Maniraj Murugan Over a year ago

Please check with your example correctly... If i check all four and remove the three but the array has removed the last value four and not three..

Prashant Pimpale Over a year ago

@undefined let me check out

Maniraj Murugan Over a year ago

STill it was like that only please check it out thoroughly what happens if you check all four and uncheck three from it..

Prashant Pimpale Over a year ago

@undefined yes got it... to check out my updated answer and working ex

Prashant Pimpale Over a year ago

@undefined have used findIndex method to find out the index of the particular item

Collectives™ on Stack Overflow

Add and remove values inside array in change event of checkbox

3 Answers 3

2 Comments

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related