How to implement nz-switch with NzPopConfirm

Question

I'm trying to implement a nz-switch with NzPopConfirm, but it is not working. An practicle example would help a lot!

`

<nz-form-item>
    <nz-switch formControlName="aso"
               nz-popconfirm
               nzPopconfirmTitle="Recomendados que o ASO seja enviado! Tem certeza que não deseja solicitá-lo?"
               (nzOnConfirm)="admissaoForm.controls.aso.value == true"
               (nzOnCancel)="admissaoForm.controls.aso.value == false">
    </nz-switch>
</nz-form-item>

`

Answer 1

Here is a basic working example. Do go through the docs for a deeper understanding.

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-switch-control',
  template: `
    <nz-switch [ngModel]="switchValue"
    nz-popconfirm
    (nzOnConfirm)="confirm()"
    (nzOnCancel)="cancel()"
    nzPopconfirmTitle="Recomendados que o ASO seja enviado! Tem certeza que não deseja solicitá-lo?" [nzControl]="true" (click)="clickSwitch()" [nzLoading]="loading"></nz-switch>
  `,
})
export class NzDemoSwitchControlComponent {
  switchValue = false;
  loading = false;

  clickSwitch(): void {
    this.loading = true;
  }

  confirm() {
    this.switchValue = true;
    this.loading = false;
  }

  cancel() {
    this.loading = false;
    this.switchValue = false;
  }
}

forked stackblitz