# Action Sheet

> An iOS-style bottom sheet of choices — a data-driven preset over the drawer, with destructive and cancel roles.

Source: https://ngwr.dev/reference/components/action-sheet  
Kind: Component

## Installation

```angular-ts
import { WrActionSheet } from 'ngwr/action-sheet';

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

## Basic

Pass `actions`; picking one emits `action` and closes the sheet. `role: 'destructive'` paints the row red, `role: 'cancel'` drops it to a separate group at the bottom. Dismissing via the backdrop, Escape, or a swipe-down closes without emitting.

```angular-html
<wr-btn (click)="open.set(true)">Open action sheet</wr-btn>

<wr-action-sheet [(open)]="open" title="Photo" [actions]="actions" (action)="onPick($event)" />
```

```angular-ts
protected readonly open = signal(false);

protected readonly actions: WrActionSheetAction[] = [
  { label: 'Take Photo', value: 'camera' },
  { label: 'Choose from Library', value: 'library' },
  { label: 'Delete', role: 'destructive', value: 'delete' },
  { label: 'Cancel', role: 'cancel' },
];

onPick(action: WrActionSheetAction): void {
  // action.value === 'camera' | 'library' | 'delete' | 'cancel'
}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `open` | Whether the sheet is open (two-way). | `boolean` | `false` |
| `actions` | The rows to offer. | `readonly WrActionSheetAction[]` | `[]` |
| `title` | Bold heading above the rows. | `string` | `''` |
| `message` | Muted sub-heading under the title. | `string` | `''` |
| `titleFallback` | Name announced for the dialog when there is no visible title. Falls back to `actionSheet.label`. | `string \| null` | `null` |
| `(action)` | Fires with the chosen row (never on a dismiss). | `WrActionSheetAction` | `—` |
| `WrActionSheetAction` | A single row. | `interface` | `—` |
| `label` | Row label. | `string` | `—` |
| `value` | Payload echoed back in `action`. | `unknown` | `—` |
| `icon` | Optional leading `wr-icon` name. | `string` | `—` |
| `role` | 'destructive' paints danger; 'cancel' drops to a bottom group. | `'default' \| 'destructive' \| 'cancel'` | `'default'` |
| `disabled` | Disable the row. | `boolean` | `false` |