'How can I set a default value for Angular Material Slide Toggle?

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!

angular angular-material

Solution 1:^[1]

if you use reactive forms you can set default value like below:

mySlideToggle= new FormControl(true,[Validators.required]);

Solution 2:^[2]

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>

Solution 3:^[3]

[(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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	nzrytmn
Solution 2	topmoon
Solution 3	Hossein

'How can I set a default value for Angular Material Slide Toggle?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]