import { Component } from '@angular/core';
import { WrPopconfirm } from 'ngwr/popconfirm';
@Component({ imports: [WrPopconfirm] })
export class MyComponent {}Popconfirm
Ask "Are you sure?" next to a button before its action runs.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
(confirmed) fires on confirm; (cancelled) on cancel, Escape or a click outside.
<wr-btn
color="danger"
wrPopconfirm="Delete this item?"
confirmText="Delete"
confirmColor="danger"
(confirmed)="remove()"
(cancelled)="onCancel()"
>Delete</wr-btn>Positions
position picks the side; the panel flips when there is no room.
<wr-btn wrPopconfirm="Delete this item?" position="bottom" (confirmed)="remove()">Delete</wr-btn>Template reference
Export as wrPopconfirm to open it from another control.
<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; the panel flips to another side when this one has no room. | 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' |
panelClass | Extra CSS classes for the confirmation bubble's overlay pane. The pane is appended to the overlay container, not to this component, so nothing in the consumer's own template encloses it and no descendant rule written around the trigger can reach it. This input is the only per-instance handle on it. A space-separated string works as well as an array. | WrClassInput | null |
(confirmed) | Fires when the user clicks confirm. | void | — |
(cancelled) | Fires when the user clicks cancel or dismisses the overlay. | void | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/popconfirm's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-popconfirm-actions-gap | var(--wr-space-sm) | .wr-popconfirm |
--wr-popconfirm-border | var(--wr-border-base) | .wr-popconfirm |
--wr-popconfirm-font-family | var(--wr-font-family-base) | .wr-popconfirm |
--wr-popconfirm-message-font-size | var(--wr-text-sm) | .wr-popconfirm |
--wr-popconfirm-message-line-height | var(--wr-text-sm-leading) | .wr-popconfirm |
--wr-popconfirm-message-margin-block-end | var(--wr-space-md) | .wr-popconfirm |
--wr-popconfirm-padding | var(--wr-space-lg) | .wr-popconfirm |
--wr-popconfirm-radius | var(--wr-border-radius-base) | .wr-popconfirm |