CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular-material
Hugo Seleiro
Hugo Seleiro

Reputation: 2655

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!

Upvotes: 3

Views: 13780

Answers (4)

NeNaD
NeNaD

Reputation: 20424

You can use checked input property:

<mat-slide-toggle [checked]="true"></mat-slide-toggle>

Upvotes: 6

Hossein
Hossein

Reputation: 240

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

Upvotes: 2

nzrytmn
nzrytmn

Reputation: 6981

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

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

Upvotes: 2

andsilver
andsilver

Reputation: 5992

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>

Upvotes: 3

Related Questions