Angular2 - md-slide-toggle displays the wrong value

Question

My problem is that the md-slide-toggle has the right value but it displays it wrong.

For example:

At the start the value is 1 and the toggle is active.

1. Time pressing the toggle: value is 0 but the toggle is still active.

2. Time pressing the toggle: value is 1 but now the toggle is now inactive.

3. ...

Check it out here: https://plnkr.co/edit/kxehpwaat5dezNActZbn?p=preview

//.html

<md-card>
  <md-slide-toggle ngDefaultControl (click)="onClick()"
     [ngModel]="(device)"></md-slide-toggle>
     {{device}}
</md-card>

//.ts

device:number = 1;

onClick() {
            let tmp;
            if (this.device == 1){
               tmp=0;
            }
            if (this.device == 0){
               tmp=1;
            }
            this.device=tmp;
        }
}

Answer 1

You're right, not having used the Slide Toggle Component before, it does seem like an odd behavior by default, although this seems to work:

Taken from your Plunker:

Template

<md-card>
     <md-slide-toggle 
      ngDefaultControl 
      (change)="onChange($event)" 
      [checked]="device"></md-slide-toggle>
     {{device}}
</md-card>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'slide-toggle-overview-example',
  templateUrl: './slide-toggle-overview-example.html',
})
export class SlideToggleOverviewExample {

  device:number = 1;

  onChange(e: Event) {
        if (e.checked == true) {
          this.device = 1;
        } else {
          this.device = 0;
        }
    }
}

Working Plunker

At first, I thought it was your use of the ngModel binding and the click binding at the same time, but that wasn't the case (since I eventually noticed you were using one-way). It does seem that they get out of sync right from the start when you attempt to assign a numeric value instead of a boolean.

As this does work as expected as well:

Template

<md-card>
     <md-slide-toggle ngDefaultControl
     [(ngModel)]="device"></md-slide-toggle>
     {{device}}
</md-card>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'slide-toggle-overview-example',
  templateUrl: './slide-toggle-overview-example.html',
})
export class SlideToggleOverviewExample {
  device:boolean = true;
}

Although, it appears that the ng team is aware of at least a version of this issue mentioned in the issue "Slide toggle - (change) event will be fired even when the slider has not change."

Answer 2

You have to find the object property checked value from event . Working Code For Me

Template

<md-card>
     <md-slide-toggle 
      [(ngModel)]="device"
      (change)="onChange($event)"></md-slide-toggle>
     {{device}}
</md-card>

TS

 import {Component} from '@angular/core';

 @Component({
  selector: 'slide-toggle-overview-example',
  templateUrl: './slide-toggle-overview-example.html',
 })
 export class SlideToggleOverviewExample {

  device:number = 1;

  onChange(value) {
        if (value.checked == true) {
          this.device = 1;
          console.log(1);
        } else {
          this.device = 0;
          console.log(0);
        }
    }
}