In order to change the state of switch Component programmatically, I considered the following four choices
1.
@Component({
selector: 'my-app',
template: `
<kendo-switch
[(ngModel)]="checked"
></kendo-switch>
`
})
class AppComponent {
public checked: boolean = true;
}
doesn't work if
<div [formGroup]="someForm">...</div
2.
<kendo-switch [checked]="false"></kendo-switch>
```typescript
public checked: boolean = true;
// and then toggle the checked variable
}
3.
```typescript
this.kendoSwitchComponent.changeValue(false)
doesn't drag switch to either side
const spaceKey = new KeyboardEvent('keydown', {
keyCode: '32'
});
return this.kendoSwitchComponent.keyDown(spaceKey);
On Changing the value programmatically, Switch toggle doesn't slide but does change the state
Plunker: https://plnkr.co/edit/IoB0sLXCM3fpziYDIrPC?p=preview
Package versions:
> npm ls --depth 0
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
The problem with the checked property binding should be fixed in the latest dev version:
https://plnkr.co/edit/0uBNcy3enddUfpgsntmv?p=preview
I am not sure if I understand the issue with ngModel but you will get an error for any input if you nest ngModel inside formGroup:
https://plnkr.co/edit/DxMu0tmNMSVPA8m91HTX?p=preview
In general, template and reactive forms should not be mixed.
changeValue and keyDown are internal methods and should not be used.
Fixed in v3.0.0