I have a <mat-slide-toggle> which I defined as such :
<mat-slide-toggle [checked]="synchronizationState === 'ENABLED'"
[disabled]="!canChangeSynchronizationState"
formControlName="enableSynchronization"
#enableSynchronizationToggle
(change)="openConfirmSynchronizationStateDialog(enableSynchronizationToggle.checked)">
</mat-slide-toggle>
However, when the user clicks on the toggle, it changes state not matter what (if it was checked, it goes unchecked and vice-versa), even if synchronizationState hasn't changed.
I've further tested the component like such :
<mat-slide-toggle [(ngModel)]="checked" [checked]="checked"></mat-slide-toggle>
where checked = false; and it appears I can still change the state of the toggle.
It looks like the mat-slide-toggle doesn't care at all about what I input in [checked], what am I doing wrong here ?
not sure about the goal/use case but it is by design.
although it can be manipulated, it is highly recommended to rethink the UX of the goal. perhaps a different control or workflow
added a stackblitz that manipulate the state to be always true on control toggle:
https://stackblitz.com/edit/angular-elks1e?file=src/app/slide-toggle-overview-example.ts