Action Sheet

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

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

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

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

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

Open action sheet

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`

Installation

Basic

API