I am experiencing an issue with displaying data in HTML using a mat-slide-toggle. The mat-slide-toggle works correctly, but the display does not reflect whether the value is 1 (checked) or 0 (unchecked). Can anyone provide some ideas on how to resolve this?
Here is my HTML code:
<form [formGroup]="productform" class="col s12" materialize>
<mat-slide-toggle formControlName="active" id="device" (change)="onChange($event)" [(ngModel)]="devicee[i]" (click)="onproduct()">
</mat-slide-toggle>
{{device}}
</form>
And here is my TypeScript code:
this.productform= this.fb.group({
'active': new FormControl('', Validators.required),
});
populateFormProduct() {
this.productform.setValue({
active: this.device
});
console.log(this.device);
}
onChange(value) {
if (value.isChecked === true) {
this.device = 1;
} else {
this.device = 0;
}
}
I am setting active: this.device in order to choose this value in the HTML.
Any assistance would be greatly appreciated. Feel free to reach out with any questions!