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.
Time pressing the toggle: value is 0 but the toggle is still active.
Time pressing the toggle: value is 1 but now the toggle is now inactive.
...
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;
}
}
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;
}
}
}
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."
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);
}
}
}
I solved this problem with setTimeout;
In your html file, add an id to #contract
<mat-slide-toggle color="primary" formControlName="contract" #contract>
Contract
</mat-slide-toggle>
in your .ts file use
@ViewChild('contract') contract: MatSlideToggle;
before constructor;
and inside of ngOnInit()
add simple:
setTimeout(() => {
this.contract.toggle();
});
it works for me