Bottom Sheet for Angular

import { AuiBottomSheet } from '@absoluteui/angular/bottom-sheet';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Bottom Sheet page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { bottomSheet: { ... } } }) (see Configuration).

Example

import { Component, signal } from '@angular/core';
import { AuiButton } from '@absoluteui/angular/button';
import { AuiBottomSheet } from '@absoluteui/angular/bottom-sheet';

@Component({
  selector: 'app-article',
  imports: [AuiButton, AuiBottomSheet],
  template: `
    <button type="button" auiButton variant="secondary" (click)="sharing.set(true)">Share</button>
    <aui-bottom-sheet title="Share" [open]="sharing()" (closed)="sharing.set(false)">
      <p>Share targets</p>
    </aui-bottom-sheet>`,
})
export class ArticleComponent {
  readonly sharing = signal(false);
}

`<aui-bottom-sheet>`

Class AuiBottomSheet; template reference #ref="auiBottomSheet".

AbsoluteUI Bottom Sheet; the projected content is the body: <aui-bottom-sheet title="Share" [(open)]="sharing">...</aui-bottom-sheet>. modal is read once at creation (init-only).

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
`title`	`string`		Required. Accessible name, rendered as the heading (text only). Must be non-empty after trimming.
`description`	`string`		Referenced by aria-describedby (text only). Hidden when empty.
`snapPoints`	`readonly number[]`		Heights as fractions of the viewport height, strictly ascending, each in (0, 1]. Without snap points the sheet fits its content (capped at 90dvh). Two or more make the handle a slider.
`snap`	`number`	`'0'`	Index into snapPoints used when the sheet opens (0 = lowest). Must be 0 without snap points. When set, open() re-applies it.
`modal`	`boolean`	`true`	true: showModal() with inert background, backdrop and scroll lock. false: show(); the page stays interactive (supplementary panels only).
`closeOnEscape`	`boolean`	`true`	Escape requests close (cancelable, reason ‘escape’) when the sheet is the topmost overlay.
`closeOnBackdrop`	`boolean`	`true`	Backdrop click requests close (cancelable, reason ‘backdrop’). Modal only.
`showCloseButton`	`boolean`	`true`	Render the header close button (reason ‘close-button’).
`closeOnDragDown`	`boolean`	`true`	Dragging the handle down past min(120px, 25% of the lowest height) requests close (cancelable, reason ‘drag’).
`icons`	`Partial<BottomSheetIcons>`		Icon slot overrides.

Two-way bindings

Model	Type	Change output	Description
`[(open)]`	`boolean`	`(openChange)`	Whether the bottom sheet is shown: `[(open)]`. Closing by Escape, the close button, or an action sets it to false.

Outputs

Output	Payload	Description
`(opened)`	`null`	After the sheet opened. Re-emits `aui-open`.
`(cancelled)`	`BottomSheetCloseDetail`	Before a user-initiated close; preventDefault keeps it open (a dismissing drag snaps back). Re-emits `aui-cancel`.
`(closed)`	`BottomSheetCloseDetail`	After the sheet closed. Re-emits `aui-close`.
`(snapChange)`	`BottomSheetSnapChangeDetail`	The user picked a height (snap point index). Re-emits `aui-snap-change`.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`snapTo(index: number): void`	Move to a snap point (index into `snapPoints`).