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.