How can I set a default value for the slide toggle?
I can set an initial value for my property in ngOnInit, but there must be an 'Angular Way'
<mat-slide-toggle
[checked]="system.ignoreUser"
(toggleChange)="system.ignoreUser= !system.ignoreUser">
<span *ngIf="system.ignoreUser">{{'ignoreUser' | translate}}</span>
<span *ngIf="!system.ignoreUser">{{'ignoreUser' | translate}}</span>
</mat-slide-toggle>
Thank you!
How can I set a default value for the slide toggle?
I can set an initial value for my property in ngOnInit, but there must be an 'Angular Way'
<mat-slide-toggle
[checked]="system.ignoreUser"
(toggleChange)="system.ignoreUser= !system.ignoreUser">
<span *ngIf="system.ignoreUser">{{'ignoreUser' | translate}}</span>
<span *ngIf="!system.ignoreUser">{{'ignoreUser' | translate}}</span>
</mat-slide-toggle>
Thank you!
Share Improve this question edited Oct 14, 2022 at 4:29 NeNaD 20.3k9 gold badges61 silver badges111 bronze badges asked Jul 24, 2020 at 11:57 Hugo SeleiroHugo Seleiro 2,6576 gold badges30 silver badges44 bronze badges4 Answers
Reset to default 6You can use checked input property:
<mat-slide-toggle [checked]="true"></mat-slide-toggle>
You can just use ngModel in your html:
<mat-slide-toggle [(ngModel)]="system.ignoreUser">
<span *ngIf="system.ignoreUser">{{'ignoreUser' | translate}}</span>
<span *ngIf="!system.ignoreUser">{{'ignoreUser' | translate}}</span>
</mat-slide-toggle>
if you use reactive forms you can set default value like below:
mySlideToggle= new FormControl(true,[Validators.required]);
[(ngModel)] worked for me in reactiveForm angular 13:
<mat-slide-toggle
formControlName="super"
labelPosition="before"
color="primary"
(change)="slideToggleChange($event)"
[(ngModel)]="checked">
</mat-slide-toggle>