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';

The basic example.

      Loading...

There are 12 placement options available.

      Loading...

Set nzIcon to customize the icon.

      Loading...

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

      Loading...

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

      Loading...

Delete a task

Whether directly execute:

Make it pop up under some conditions.

      Loading...

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

      Loading...

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

      Loading...

Param	Description	Type	Default value
`[nzPopconfirmArrowPointAtCenter]`	Arrow point at center of the origin	`boolean`	`false`
`[nzPopconfirmTitle]`	Title of the confirmation box	`string \| TemplateRef<void>`	-
`[nzPopconfirmTitleContext]`	The context of confirmation box title	`object`	-
`[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 popconfirm	`ElementRef`	-
`[nzPopconfirmVisible]`	Show or hide popconfirm	`boolean`	`false`
`[nzPopconfirmShowArrow]`	Whether popconfirm has arrow	`boolean`	`true`
`(nzPopconfirmVisibleChange)`	Callback of hide or show	`EventEmitter<boolean>`	-
`[nzPopconfirmMouseEnterDelay]`	Delay in seconds, before popconfirm is shown on mouse enter	`number`	`0.15`
`[nzPopconfirmMouseLeaveDelay]`	Delay in seconds, before popconfirm is hidden on mouse leave	`number`	`0.1`
`[nzPopconfirmOverlayClassName]`	Class name of the popconfirm card	`string`	-
`[nzPopconfirmOverlayStyle]`	Style of the popconfirm card	`object`	-
`[nzPopconfirmBackdrop]`	whether or not the overlay should attach a backdrop	`boolean`	`false`

Param	Description	Type	Default value	Global Config
`[nzCancelText]`	Text of the Cancel button	`string`	`'Cancel'`	-
`[nzOkText]`	Text of the Confirm button	`string`	`'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`.	`boolean`	`false`	-
`[nzOkDisabled]`	prevents a user from interacting with the OK button. Consistent with the `disabled` of the `nz-button`.	`boolean`	`false`	-
`[nzCondition]`	Whether to directly emit `onConfirm` without showing Popconfirm	`boolean`	`false`	-
`[nzIcon]`	Customize icon of confirmation	`string \| TemplateRef<void>`	-	-
`[nzAutoFocus]`	Autofocus a button	`null \| '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) \| null`	`null`	-
`(nzOnCancel)`	Callback of cancel	`EventEmitter<void>`	-	-
`(nzOnConfirm)`	Callback of confirmation	`EventEmitter<void>`	-	-

Consult Tooltip's documentation to find more APIs.

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