# Popconfirm

> Small "Are you sure?" panel anchored to its trigger. Emits confirmed or cancelled.

Source: https://ngwr.dev/reference/components/popconfirm  
Kind: Directive, CDK Overlay

## Installation

```angular-ts
import { WrPopconfirm } from 'ngwr/popconfirm';

@Component({ imports: [WrPopconfirm] })
export class MyComponent {}
```

## Basic usage

```html
<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.

```angular-html
<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 |
| --- | --- | --- | --- |
| `wrPopconfirm`required | 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` | — |