title: How to make, the switch to change only when I click confirm `ok`
body: <p>How to make that the switch toggle change only when I click Ok in confirm box? When I click Cancel in confirm box, I want to change nothing.</p>
  
  <p>My code html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-card class="result"&gt;
    &lt;mat-card-content&gt;
      &lt;h2 class="example-h2"&gt;Result&lt;/h2&gt;
       &lt;section class="example-section"&gt;
        &lt;mat-slide-toggle
            class="example-margin"
            [color]="color"
            [checked]="checked"
            [disabled]="disabled"
            (click)="myfunction()"&gt;
          Slide me!
        &lt;/mat-slide-toggle&gt;
      &lt;/section&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>code ts:</p>
  
  <pre class="lang-ts prettyprint-override"><code>export class SlideToggleConfigurableExample {
    color = 'accent';
    checked = false;
    disabled = false;
      myfunction() {
      if (confirm('Are you sure to change Status?')) {
       }
    }
  }
  </code></pre>
  
  <p>I tried and this code,</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-slide-toggle
        class="example-margin"
        [color]="color"
        [checked]="checked"
        [disabled]="disabled"
        (click)="myfunction()"
        onclick="return confirm('Are you sure?')"&gt;
      Slide me!
    &lt;/mat-slide-toggle&gt;
  </code></pre>
  
  <p>and remove  <code>if (confirm('Are you sure to change Status?')) {}</code> from ts.</p>
  
  <p>In this I have this result:my function executed when I click <code>ok</code> and cancel.</p>
  
  <p>Please, How to make, the switch to change only when I click confirm <code>ok</code>.</p>
  
  <p>Thank you</p>
  
  <p>Update:</p>
  
  <p>Html code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="myform" class="col s12"&gt;
  &lt;div *ngFor="let item of homeboxsp;let i = index"&gt;
              &lt;section class="example-section"&gt;
              &lt;mat-slide-toggle value="active" formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"(click)="onActiveHomeboxP()"&gt; {{item.active}}
              &lt;/mat-slide-toggle&gt;
          &lt;/section&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>ts code:</p>
  
  <pre class="lang-ts prettyprint-override"><code>export class AppComponent {
    public homeboxsp: HomeboxP[] = [];
    myform: FormGroup;
    checkedBtn: boolean;
    constructor(public service: Service) {
    }
    ngOnInit() {
      this.populateFormHomeboxP();
    }
    populateFormHomeboxP() {
      this.homeboxsp = this.service.getData();
  
  
      let controls = {
        'homeboxpackage_id': new FormControl('', Validators.required)
      };
  
      for (let i = 0; i &lt; this.homeboxsp.length; i++) {
        controls['active-' + i] = new FormControl(this.homeboxsp[i].active == '1', Validators.required)
      }
      this.myform = new FormGroup(controls);
      this.patchForm();
    }
    patchForm() {
      this.myform.patchValue({
        homeboxpackage_id: this.homeboxsp.map(x =&gt; x.homeboxpackage_id),
      });
      console.log(this.homeboxsp.map(x =&gt; x.active))
      console.log(this.homeboxsp.map(x =&gt; x.homeboxpackage_id))
    }
    onActiveHomeboxP() {
      if (confirm('Are you sure?')) {
        let edigps = this.myform.value
        console.log(edigps)
        console.log('true')
      } else {
        this.checkedBtn = !this.checkedBtn;
      }
    }
  }
  </code></pre>
  
  <p>Image:
  <a href="https://i.stack.imgur.com/ApLLv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ApLLv.png" alt="enter image description here"></a></p>
  
  <ol>
  <li>is checked because status is 1</li>
  <li>is checked when I click <strong>Cancel</strong></li>
  <li>is checked when I click <strong>Ok</strong> in <code>consele.log('ture')</code>, show true</li>
  </ol>
  
  <p><strong>Update:</strong> When I add  <code>(ngModel)]="checkedBtn"</code>  in html, switches change all, not only one switch.</p>
  
  <p><a href="https://i.stack.imgur.com/oJDGs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oJDGs.png" alt="enter image description here"></a></p>