How to use MatSlideToggleChange of mat-slide-toggle in Angular Material
you can use output change property to toogle its change value
<mat-slide-toggle
[(ngModel)]="checked"
class="example-margin"
[color]="color"
(change)="changed()">
Slide me! {{checked}}
</mat-slide-toggle>
component
color = 'accent';
checked = false;
changed(){
console.log(this.checked)
}
demo stackblitz
MatSlideToggleChange has two fields:
source: MatSlideToggle
checked: boolean
In .html file
<mat-slide-toggle
(change)="onChange($event)">
</mat-slide-toggle>
In .ts file
onChange($event: MatSlideToggleChange) {
console.log($event);
}
You would get output like this in the console:
MatSlideToggleChange {source: MatSlideToggle, checked: false}
If you were thinking about using the (click)
event instead of the (change)
event, I would recommend to use the (change)
event instead for better mobile support when the user drags the mat-slide-toggle
. You basically just inspect the value of the $event which is a MatSlideToggleChange
.