Angular Action Sheet | ng-hub-ui-action-sheet
Angular action sheet opened from a service: actions with roles, grouped or flat, handlers that can refuse to close, and dismissal by backdrop, keyboard or a drag of the sheet.
Last updated Aug 30, 2026
Overview
Why teams search for this library
SEO.LIBRARY.ACTION_SHEET.INTRO
Install
npm install ng-hub-ui-action-sheetJump to
Ideal for
About action-sheet
SEO.LIBRARY.ACTION_SHEET.OVERVIEW
Feature guides
Opening a sheet
The sheet is opened from a service and answers once, so nothing about it sits in the page while it is closed.
Examples:
Opening a sheet
A header, three actions and a way out; the call resolves with the choice.
Code
Import:
Template:
Component:
Roles and handlers
A role decides where an action sits and how it reads; a handler decides whether the sheet may close at all.
Examples:
Roles and a handler that refuses
The destructive action fails the first time and keeps the sheet open.
Code
Import:
Template:
Component:
Grouped actions
Blocks with their own titles, for a sheet long enough that a flat list would stop reading as one.
Examples:
Grouped actions
Titled blocks, the current format marked, and one action disabled.
pdfCode
Import:
Template:
Component:
Accent and tokens
One semantic accent for the whole sheet, and a CSS variable for every visual decision under it.
Examples:
Accent and tokens
The same sheet with a semantic accent, and with branded tokens.
The accent colours the selected action; the branded sheet also changes its radius, its touch targets and the width it is allowed to take.
Code
Import:
Template:
Component:
Key features
Recent changes
Version 22.0.0 - 8/30/26, 12:00 AM
added: `HubActionSheet.open()` returns a `HubActionSheetRef` whose `result` resolves once, with the role and data of the chosen action or with how the sheet was dismissed.
added: Actions with roles: `cancel` is set apart at the end wherever it was declared, `destructive` reads in the danger colour, `selected` is marked, and a handler returning `false` keeps the sheet open.
added: Grouped actions with an optional title per block, plus header and sub-header.
added: Dismissal by backdrop, `Escape` and by dragging the sheet down, each reporting its own role and running the cancel action first.
added: `role="dialog"` with `aria-modal`, focus moved in on open, trapped while the sheet lives and returned to the opener on close.
removed: The placeholder `ActionSheet` component (selector `lib-action-sheet`) that the pre-release package shipped.