How to use MatSlideToggleChange of mat-slide-toggle in Angular Material

Question

I'm trying to use a switch in a form to toggle the appearance of one of two dropdown menus in the same form. I believe that this means I want to use the MatSlideToggleChange class emitted by a MatSlide toggle. Unfortunately, the documentation doesn't provide an example of how to use the MatSlideToggleChange class with a MatSlide.

Has anybody used the MatSlide in this way?

Answer 1

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

Answer 2

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.