使 mat-slide-toggle 只读

Question

I am using mat-slide-toggle in my app & want to know if there's a way to make it read-only ie disable the slider. I don't want to disable the whole component which is the result when I set the disabled property. Is there any way to do this?

Answer 1

as work around this you can add an ngModel and ngModelChange output to force the mat-slide to keep same value ( not perfect solution but it will work)

<mat-slide-toggle [(ngModel)]="myModel" (ngModelChange)="keepIt($event)">
              </mat-slide-toggle>

on Ts file

    keepIt(d){
       this.myModel=true    
    }

the other solution you can do is to remove the opacity from mat-disabled , that will make it look like an active slider and you can then add [disabled]="true"

::ng-deep .mat-slide-toggle.mat-disabled {
  opacity: 1 !important;
}

check this https://stackblitz.com/edit/angular-9zujdv?file=src%2Fapp%2Fslide-toggle-overview-example.html

Answer 2

You can also create a directive

@Directive({
  selector: '[disableToogle]'
})
export class DisableToogleDirective {
  @Input() set disableToogle(value:boolean)
  {
        this.slide.toggleChange.closed=value
  }
  constructor(private slide:MatSlideToggle) { }
}

You use as

<mat-slide-toggle  [disableToogle]="variable">Slide me!</mat-slide-toggle>

See the stackblitz