ползунковый переключатель не должен меняться, когда я нажимаю кнопку «подтвердить отмену»

Question

В моем проекте я использовал ползунковый переключатель, чтобы активировать или деактивировать продукт.Все работает нормально, только когда я добавляю диалоговое окно подтверждения, мой слайд меняется, как в Demo .

Так что, когда я нажимаю кнопку отмены, изменение слайд-переключателя при нажатии кнопки ОК, изменения слайд-переключателя.

Мой код html:

<mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Result</h2>
     <section class="example-section">
      <mat-slide-toggle
          class="example-margin"
          [color]="color"
          [checked]="checked"
          [disabled]="disabled"
          (click)="myfunction()">
        Slide me!
      </mat-slide-toggle>
    </section>
  </mat-card-content>
</mat-card>

код ts:

export class SlideToggleConfigurableExample {
  color = 'accent';
  checked = false;
  disabled = false;
    myfunction() {
    if (confirm('Are you sure to change Status?')) {
     }
  }
}

Я хочу сказать, как изменить мой слайд-переключатель, когда я нажимаю кнопку ОК, когда я нажимаю кнопку отмены, я не хочу ничего менять.

Спасибо.

Answer 1

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #c8e38f;
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #91c71f;
}
.mat-slide-toggle .mat-ripple-element{
    background-color: rgba(145, 199, 31, .12);
}

это стиль для цветного матового слайд-тумблера

Answer 2

Попробуйте:

<mat-slide-toggle
      class="example-margin"
      [color]="color"
      [checked]="checked"
      [disabled]="disabled"
      (click)="myfunction()"
      onclick="return confirm('Are you sure?')">
    Slide me!
  </mat-slide-toggle>

и удалите if (confirm('Are you sure to change Status?')) {} из ts

Демо