Popconfirm

A simple and compact confirmation dialog of an action.

When To Use#

A simple and compact dialog used for asking for user confirmation.

The difference with the confirm modal dialog is that it's more lightweight than the static popped full-screen confirm modal.

import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';

Examples

The basic example.

expand codeexpand code
      Loading...
    

There are 12 placement options available.

expand codeexpand code
      Loading...
    

Set nzIcon to customize the icon.

expand codeexpand code
      Loading...
    

Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.

expand codeexpand code
      Loading...
    

Set okText and cancelText props to customise the button's labels.

expand codeexpand code
      Loading...
    
Delete a task

Whether directly execute:

Make it pop up under some conditions.

expand codeexpand code
      Loading...
    

Set [nzPopconfirmShowArrow]="false" to hide arrow.

expand codeexpand code
      Loading...
    

Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.

expand codeexpand code
      Loading...
    

API#

[nz-popconfirm]#

ParamDescriptionTypeDefault value
[nzPopconfirmArrowPointAtCenter]Arrow point at center of the originbooleanfalse
[nzPopconfirmTitle]Title of the confirmation boxstring | TemplateRef<void>-
[nzPopconfirmTitleContext]The context of confirmation box titleobject-
[nzPopconfirmTrigger]Popconfirm trigger mode. If set to null it would not be triggered'click' | 'focus' | 'hover' | null'click'
[nzPopconfirmPlacement]The position of the popconfirm relative to the target'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | Array<string>'top'
[nzPopconfirmOrigin]Origin of the popconfirmElementRef-
[nzPopconfirmVisible]Show or hide popconfirmbooleanfalse
[nzPopconfirmShowArrow]Whether popconfirm has arrowbooleantrue
(nzPopconfirmVisibleChange)Callback of hide or showEventEmitter<boolean>-
[nzPopconfirmMouseEnterDelay]Delay in seconds, before popconfirm is shown on mouse enternumber0.15
[nzPopconfirmMouseLeaveDelay]Delay in seconds, before popconfirm is hidden on mouse leavenumber0.1
[nzPopconfirmOverlayClassName]Class name of the popconfirm cardstring-
[nzPopconfirmOverlayStyle]Style of the popconfirm cardobject-
[nzPopconfirmBackdrop]whether or not the overlay should attach a backdropbooleanfalse
ParamDescriptionTypeDefault valueGlobal Config
[nzCancelText]Text of the Cancel buttonstring'Cancel'-
[nzOkText]Text of the Confirm buttonstring'Confirm'-
[nzOkType]Button type of the Confirm button'primary' | 'ghost' | 'dashed' | 'danger' | 'default''primary'-
[nzOkDanger]Danger status of the OK button. Consistent with the nzDanger of the nz-button.booleanfalse-
[nzOkDisabled]prevents a user from interacting with the OK button. Consistent with the disabled of the nz-button.booleanfalse-
[nzCondition]Whether to directly emit onConfirm without showing Popconfirmbooleanfalse-
[nzIcon]Customize icon of confirmationstring | TemplateRef<void>--
[nzAutoFocus]Autofocus a buttonnull | 'ok' | 'cancel'null
[nzBeforeConfirm]The hook before the confirmation operation, decides whether to continue responding to the nzOnConfirm callback, supports asynchronous verification.(() => Observable<boolean> | Promise<boolean> | boolean) | nullnull-
(nzOnCancel)Callback of cancelEventEmitter<void>--
(nzOnConfirm)Callback of confirmationEventEmitter<void>--

Consult Tooltip's documentation to find more APIs.

Note#

Please ensure that the node of [nz-popconfirm] accepts onMouseEnter, onMouseLeave, onFocus, onClick events.