Angular Material Slide / Switch button example

angular-material-slide.ts

// example for slide button, which value is not boolean

// example.html
<div class="form-group m-form__group">
    <mat-slide-toggle
        formControlName="status"
        [color]="primary"
        (change)="changeStatus($event)"
    >
        {{ toggleStatusLabel }}
    </mat-slide-toggle>
</div>

// example.ts
public toggleStatus: boolean = true;
public toggleStatusLabel: string;

ngOnInit() {
  // existingData contains toggle status, which is 'ACTIVE' or 'BLOCKED'
  const toggleStatus = this.existingData.status === 'ACTIVE' ? true : false;
  this.toggleStatusLabel = this.existingData.status;
  this.exampleForm.controls.status.setValue(toggleStatus);
}

changeStatus(e) {
  this.toggleStatusLabel = e.checked === true ? 'ACTIVE' : 'BLOCKED';
}