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: './appponent.html',
  styleUrls: [ './appponent.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

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

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.ponent.html',
  styleUrls: [ './app.ponent.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./edit/angular-9pt9sn

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

• javascript
• angular
• typescript
• checkbox
• angular6

• use reactiveform – Chellappan வ Commented Nov 26, 2018 at 9:56
• This link would help coryrylan./blog/creating-a-dynamic-checkbox-list-in-angular – 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 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 Commented Nov 26, 2018 at 10:03
• 1 stackblitz./edit/angular-a8fyfp – Chellappan வ Commented Nov 26, 2018 at 10:40

3 Answers 3

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./edit/angular-5jamcr

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)">

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