mat-slide-toggle Angular Material toggle programmatically

Question

I am trying to toggle the toggle() via code:

template

<mat-slide-toggle color="primary" (change)="updateFunc($event)"></mat-slide-toggle>

ts

updateFunc(e) {
  // do some checks to see if can be activated
  // if can't be activated, don't slide to on
  e.checked = false; // <--- does not work
  e.toggle(); // <-- does not work
}

Any ideas?

--EDIT--

To clarify, after the change event, the button is toggled to on. My function is run to do some tests. If the tests do not pass, I want to toggle the slider back to the off position. So, how do I toggle the button (on or off) in my code? This is simply a question of using the toggle() method in my code, or unchecking the switch in my code.

Fenrir

mat-slide-toggle has an input property checked, initially you assign this to either true or false then on change event, you can toggle it. – Antilogarithm

I am well aware, but I want to change it back programmatically after it has been changed, how do I do this? – Fenrir

Answer 1

https://stackblitz.com/edit/angular-material-edh46h

<mat-slide-toggle #toggleElement class="example-margin" [checked]="checked" (change)="updateFunc($event)">
    Slide me!
</mat-slide-toggle>

  @ViewChild("toggleElement") ref: ElementRef;

  checked: boolean;

  ngOnInit() {
    this.checked = true;
  }

  updateFunc(e) {
    const someCondition = true;
    if (someCondition) {
      this.ref.checked = false;
    }
  }

Honey

This worked. However, instead of using ViewChild, I simply passed the element into the function. Thanks! – Fenrir

Answer 2

You can make use of template reference variable only.

template

<mat-slide-toggle color="primary" #slide (change)="updateFunc(slide)">
</mat-slide-toggle>

ts

updateFunc(e) {
 let var=false;
 if(!var)
 {
   e.checked = true; //either true or false 
 }

Belting