I am developing an Angular application where I have created a checkbox that captures the change event and adds the checked value to an array.
The issue I am facing is that even if the checkbox is unchecked, the object is still being added to the array.
Does anyone know how to efficiently remove the object from the array when the checkbox is unchecked?
Here is the HTML code:
<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>
And here is the TypeScript code:
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 = [];
//Function to detect Checkbox Change
getCheckboxValues(data) {
let obj = {
"order" : data
}
// Adding the object to the array
this.newArray.push(obj);
//The issue occurs when unchecking - How do we remove the value from the array when it's unchecked?
console.log(this.newArray);
}
}
You can find my progress on solving this issue at this link.
Could someone please assist me in removing unchecked values from the `newArray`?