How to make mat-slide-toggle with confirm

Question

The problem that I have in my code below is, when I click on the confirm, the switch changes. I want the switch to change only when I click OK.

Can you suggest me any idea? How to make mat-slide-toggle with confirm?

Html code:

<form [formGroup]="myform" class="col s12">
<div *ngFor="let item of homeboxsp;let i = index">
            <section class="example-section">
            <mat-slide-toggle value="active" formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"(click)="onActiveHomeboxP()"> {{item.active}}
            </mat-slide-toggle>
        </section>
</div>
</form>

ts 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 < 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 => x.homeboxpackage_id),
    });
    console.log(this.homeboxsp.map(x => x.active))
    console.log(this.homeboxsp.map(x => 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;
    }
  }
}

Answer 1

If you have an object you can reassign the value after the (change) event:

<mat-slide-toggle (change)="slideToggleChange($event, obj)">
   Change me
</mat-slide-toggle>

slideToggleChange(event: MatSlideToggleChange, obj: any): void {
    event.source.checked = obj.enabled; // Force slide toggle with our value
  
    // Open confirmation dialog
    this.dialog.open(ConfirmationDialog, {
        data: config,
    }).afterClosed().subscribe(
        (confirm: boolean) => {
        if (confirm === true) {
            // Do something
        }
      }
    );
  }

Answer 2

demo (e , element){ 
console.log(element.status);
if (element.status == true){
    if(confirm('true button deactive Are you sure')){
        this.getUsersService.changeStatus(element.id).subscribe((data) => {
            if (data === 'error') {
                e.source.checked = true;                    
                this.snackBar.open('Server Error happened please try later.', '', {
                    duration: 3000,
                    panelClass: ['error-snackbar']
                });
                
            } else {
                e.source.checked = false;
                this.callSkipLevelUsers();

Reload table

                    this.snackBar.open('user status changed succesfully!!!', '', {
                        duration: 3000,
                        panelClass: ['success-snackbar']
                    });
                   
                }
            });
        } else {
            e.source.checked = true;
        }
    } else {
        if(confirm('false button active Are you sure')){
            this.getUsersService.changeStatus(element.id).subscribe((data) => {
                if (data === 'error') {
                    e.source.checked = false;
                    this.snackBar.open('Server Error happened please try later.', '', {
                        duration: 3000,
                        panelClass: ['error-snackbar']
                    });
                    
                } else {
                    e.source.checked = true;
                    this.callSkipLevelUsers();
    reload table 
                    this.snackBar.open('user status changed succesfully!!!', '', {
                        duration: 3000,
                        panelClass: ['success-snackbar']
                    });
                   
                }
            });
        } else {
            e.source.checked = false;
        }
    }
}

Angular mat table mat slider work for me

Answer 3

This code is a sample one for multiple switch, You can add your extra logics :

HTML

<section class="example-section">
  <div *ngFor="let item of homeboxsp;let i = index">
    <mat-slide-toggle class="example-margin" [(ngModel)]="checkedBtn[i]" (click)="onActiveHomeboxP(i)">
    </mat-slide-toggle>
  </div>
</section>

TS

  checkedBtn: any[]=[];
  homeboxsp = ['a','b','c'];

  constructor() {    
  }

  ngOnInit() { }

  onActiveHomeboxP(i:any) {
    if (confirm('Are you sure?')) {

      console.log('true')
    } else {
      this.checkedBtn[i] = !this.checkedBtn[i];
    }


  }