CODEWITHSUNDEEP
angularmaterial-designangular-material
Atticus29
Atticus29

Reputation: 4412

Usage of MatSlideToggleChange Event of mat-slide-toggle

I'm trying to use a switch in a form to toggle the appearance of one of two dropdown menus in the same form.

Can I use the MatSlideToggleChange event emitted by a MatSlide class toggle to achieve my desired result?

Upvotes: 23

Views: 62295

Answers (3)

Abinesh Joyel
Abinesh Joyel

Reputation: 2093

you can use output change property to toogle its change value

<mat-slide-toggle
   [ngModel]="checked"
   (change)="changed()"
   class="example-margin"
   [color]="color"
>
   Slide me! {{checked}}
</mat-slide-toggle>

component

color = 'accent';
checked = false;

  changed(){
    console.log(this.checked)
  }

demo stackblitz

Upvotes: 37

Reinaldo Garcia
Reinaldo Garcia

Reputation: 1

HTML

<mat-slide-toggle [(ngModel)]="swFechaFinalPago" name="swFechaFinalPago">
                Fecha Final Pago? {{swFechaFinalPago}}</mat-slide-toggle>

TS

public swFechaFinalPago: boolean =  false;

Upvotes: 0

Nick Gallimore
Nick Gallimore

Reputation: 1263

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.

Upvotes: 14

Related Questions