Popconfirm

Pop up a bubble confirmation box for an action.
Import

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.

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.