1

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```..

Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116

3 Answers3

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

joyBlanks
  • 6,419
  • 1
  • 22
  • 47
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)">
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • 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?? – Maniraj Murugan Nov 26 '18 at 09:49
  • 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 – Leela Venkatesh K Nov 26 '18 at 09:52
  • @undefined https://stackblitz.com/edit/angular-zzwjea?file=src%2Fapp%2Fapp.component.ts – Sachila Ranawaka Nov 26 '18 at 10:08
  • 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.. – Maniraj Murugan Nov 26 '18 at 10:14
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

Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84