mat-slide-toggle is by default showing as inactive but the button state is active in angular-CodePudding

In have the below code which by default showing the mat-slide-toggle as inactive but the switch color is in active state. Can anyone correct my logic? The below code i have written.

By default in the component i have declared as

skipNotification:boolean=false;

The template code is below:

    <mat-slide-toggle [check]="job['notifications'][0]['skipNotification']== true"
                                            formControlName="skipNotification"
                                            (change)="job['notifications'][0]['skipNotification'] = !job['notifications'][0]['skipNotification']">
                                            {{job['notifications'][0]['skipNotification'] == true ? 'ACTIVE' : 'INACTIVE'}}
   
</mat-slide-toggle>

See the below images for reference. I want the like if its inactive i want to show grey one button and for active i want to show green button.

Please help me what mistake i have made.

Thanks.

CodePudding user response：

note that [check] is replaced with [checked]

you do not need to do job['notifications'][0]['skipNotification'] == true

<mat-slide-toggle 
      [checked]="job['notifications'][0]['skipNotification']"
      formControlName="skipNotification"
      (change)="job['notifications'][0]['skipNotification'] = !job['notifications'][0]['skipNotification']">
      {{job['notifications'][0]['skipNotification'] ? 'ACTIVE' : 'INACTIVE'}}
</mat-slide-toggle>