slide-toggle should not change when I click the `confirm cancel` button

Question

In my project I used slide-toggle to activate or deactivate a product. Everything works ok, only when I add a confirmation dialog, my slide change like in Demo.

So when I click cancel, slide-toggle change when I click ok, slide-toggle changes.

My code 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>

code ts:

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

That I want to say is, how to change my slide-toggle when I click ok, when I click cancel, I do not want to change anything.

Thank you.

Answer 1

Try this:

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

and remove if (confirm('Are you sure to change Status?')) {} from ts

Demo