Passing parameters on checking and un-checking of a checkbox - html

Question

I am new to Angular and typescript. I need help from someone in the following requirement.I have a web page where I have a list of check boxes as given here:
I have defined a isChecked boolean variable in component.ts file and has a data binding with the template using ngModel. A function onChange() is called when the checkbox is checked or un-checked. I want to pass two parameters to the function. One is check/uncheck value i.e like true/false and another is the string value containing the label of the checkbox clicked. For example if st1 is checked then onChange(check, 'st1') will be invoked. The logic inside component class will add 'st1' to an array if it is unchecked.
In the template I have written like this:
<ul>
<li [(ngModel)]="student" *ngFor="let student of studentsToLOad" [value]="student">
<b>{{student.name}}</b>
<input type="checkbox" id="present" name="present" [(ngModel)]="isChecked"
(change)="onChange(isChecked, student)"/>
</li>
</ul>
But when I am clicking on st1, all the other check boxes are also getting checked. Please help.

Answer 1

The ngModel value is set to a single variable isChecked. This variable is passed to all checkboxes. All the checkboxes will reflect their state based on isChecked. You could use some thing like student.checked. You could set the value in the onChange fucntion.
onChange(isChecked, student) {
student.isChecked = isChecked;
}
<ul>
<li [(ngModel)]="student" *ngFor="let student of studentsToLOad" [value]="student">
<b>{{student.name}}</b>
<input type="checkbox" id="present" name="present" [(ngModel)]="student.isChecked" (change)="onChange(isChecked, student)" />
</li>
</ul>

Answer 2

The error occurs because all the checkboxes are bound to a single global boolean flag isChecked.
You could remove the ngModel and value from the li element and bind the ngModel in input element to student specific booleans instead of a global boolean flag. Try the following
Controller
export class AppComponent {
studentsToLOad = [
{ name: 'st1', status: false },
{ name: 'st2', status: false },
{ name: 'st3', status: false },
{ name: 'st4', status: false },
];
onChange(status, name) {
console.log(name, status);
}
}
Template
<ul>
<li *ngFor="let student of studentsToLOad">
<b>{{student.name}}</b>
<input type="checkbox" id="present" name="present" [(ngModel)]="student.status"
(change)="onChange(student.status, student.name)"/>
</li>
</ul>