Installation
import { WrPopconfirm } from 'ngwr/popconfirm';
@Component({ imports: [WrPopconfirm] })
export class MyComponent {}Basic usage
<wr-btn
color="danger"
[wrPopconfirm]="'Delete this item?'"
confirmText="Delete"
confirmColor="danger"
(confirmed)="remove()"
(cancelled)="onCancel()"
>Delete</wr-btn>Template reference
The directive exports itself as wrPopconfirm, so a template can raise the question from a control other than the one it is attached to.
<wr-btn wrPopconfirm="Delete this file?" #ask="wrPopconfirm" (confirmed)="remove()">
Delete
</wr-btn>
<!-- Anywhere else in the same template -->
<wr-btn [disabled]="ask.isOpen()" (click)="ask.open()">Ask again</wr-btn>API
| Name | Description | Type | Default |
|---|---|---|---|
wrPopconfirmrequired | Confirmation message. | string | — |
position | Anchor side. | WrPopconfirmPosition | 'top' |
confirmText | Confirm button text. Falls back to popconfirm.confirm. | string | null | null |
cancelText | Cancel button text. Falls back to popconfirm.cancel. | string | null | null |
ariaLabel | Accessible name of the confirmation dialog. role="dialog" with no name announces as a bare "dialog". Falls back to popconfirm.label. | string | null | null |
confirmColor | Color of the confirm button. | WrColor | 'primary' |
(confirmed) | Fires when the user clicks confirm. | void | — |
(cancelled) | Fires when the user clicks cancel or dismisses the overlay. | void | — |