I am utilizing the mat-slide-toggle feature from Material in a similar manner to this example https://material.angular.io/components/slide-toggle/overview
The problem I am encountering is similar to the issue outlined in this link:
https://stackblitz.com/edit/angular-zafcmh-rvgjhs?file=app%2Fslide-toggle-configurable-example.ts
When I click on any one switch, I only want that particular switch to be affected, not all of them simultaneously.
Could you please suggest a possible solution?
Here is my HTML code snippet:
<form [formGroup]="activeHomeboxPForm">
<mat-slide-toggle formControlName="active"
id="active"
[(ngModel)]="device"
(change)="onChange($event)"
(click)="onActiveHomeboxP(item.homeboxpackage_id)">
</mat-slide-toggle>
{{device}}
</form>
And here is my TypeScript code:
this.activeHomeboxPForm = this.fb.group({
'active': new FormControl('', Validators.required),
'homeboxpackage_id': new FormControl('', Validators.required)
});
populateFormHomeboxP() {
this.activatedRoute.params.subscribe(
params => {
this.hsP.getHomeboxPById(params['id']).subscribe(
homeboxP => {
this.homeboxP = homeboxP;
this.activeHomeboxPForm.controls['active'].setValue(homeboxP.active);
this.activeHomeboxPForm.controls['homeboxpackage_id'].setValue(homeboxP.homeboxpackage_id);
}
);
}
);
}
onActiveHomeboxP(homeboxpackageid) {
this.loading = true;
if (confirm('Are you sure to change Status?')) {
let editHomeboxp = new HomeboxP(
this.activeHomeboxPForm.value
);
editHomeboxp.homeboxpackage_id = homeboxpackageid;
console.log(editHomeboxp)
this.hsP.activatehomeboxp(editHomeboxp).subscribe(
result => {
if (result === true) {
Materialize.toast('HomeboxPacket updated successfully', 4000);
} else {
this.loading = false;
}
},
error => {
this.loading = false;
}
);
}
}
onChange(value) {
if (value.checked === true) {
this.device = 1;
console.log(1);
} else {
this.device = 0;
console.log(0);
}
}
Thank you for your assistance!