Angular material slide toggle binding on checked not working

user_3696800 0
Viewed 7684

It seems to be so easy, but I just cannot get the checked binding of the slide toggle to work.

(I'm using angular 9.1 and material 9.2.)

Here's the html:

<mat-slide-toggle [checked]="isSlideChecked" (change)="toggleChanges($event)">isSlideChecked: {{isSlideChecked}}</mat-slide-toggle>

<p *ngFor="let e of toggleEvents">{{e}}</p>

Here's the TS:

import { Component, OnInit } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss']
})
export class TestComponentComponent implements OnInit {

  public isSlideChecked: boolean = false;
  public toggleEvents: string[] = [];

  constructor() { }

  ngOnInit(): void {
  }

  toggleChanges($event: MatSlideToggleChange) {
    this.toggleEvents.push("Toggle Event: " + $event.checked)
  }
}

The change event is working fine, $event.checked is always set correctly. But the checked binding just won't work, it's always staying false.

Before I give up and use an odinary checkbox, I hoped someone here could help me. Any suggestions?

angular9 angular-material angular
3 Answers

The property checked of material slide toggle is only for input binding. Because of that any changes to the toggle by clicking will not be output in [checked]. You will have to use the (change) event to assign the values from the event.checked.

toggleChanges($event: MatSlideToggleChange) { this.isSlideChecked = $event.checked; }

You can refer the API documentation for more details, https://material.angular.io/components/slide-toggle/api

user_27723000

here's a link to the working stackblitz.

I'm not sure why, but when I removed the public from isSlideChecked, the binding started to work. I also removed the public from the toggleEvents array as well. Hope this helps.

user_99838880

anohter way using both[(ngModel)] and event change. get value by event and set value by [(ngModel)]:

component.html:

<mat-slide-toggle 
                 formControlName="myName" 
                 (change)="slideToggleChange($event)"
                 [(ngModel)]="checked">
</mat-slide-toggle>

component.ts

slideToggleChange(event: MatSlideToggleChange) {
    this.checked = event.source.checked;   
  }
user_126772530
Related