Drawer for Angular

import { AuiDrawer } from '@absoluteui/angular/drawer';

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

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

Example

import { Component, signal } from '@angular/core';
import { AuiButton } from '@absoluteui/angular/button';
import { AuiDrawer } from '@absoluteui/angular/drawer';

@Component({
  selector: 'app-orders',
  imports: [AuiButton, AuiDrawer],
  template: `
    <button type="button" auiButton variant="secondary" (click)="filtersOpen.set(true)">Filters</button>
    <aui-drawer title="Filters" placement="end" [modal]="false" [open]="filtersOpen()" (closed)="closed()">
      <p>Filter controls</p>
    </aui-drawer>`,
})
export class OrdersComponent {
  readonly filtersOpen = signal(false);

  closed(): void {
    this.filtersOpen.set(false);
    // re-run the query
  }
}

`<aui-drawer>`

Class AuiDrawer; template reference #ref="auiDrawer".

AbsoluteUI Drawer; the projected content is the body: <aui-drawer title="Filters" [(open)]="filtersOpen">...</aui-drawer>. 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.
`description`	`string`		Referenced by aria-describedby.
`actions`	`readonly DrawerAction[]`		Footer buttons; clicking closes with the action value.
`modal`	`boolean`	`true`	true: showModal() with inert background, backdrop and scroll lock. false: show(); background stays interactive (supplementary panels only).
`placement`	`DrawerPlacement`	`'end'`	Screen edge; start/end follow the writing direction.
`size`	`DrawerSize`	`'md'`	Inline size for side drawers; maximum block size (capped at 85dvh) for top/bottom.
`closeOnEscape`	`boolean`	`true`	Escape requests close (cancelable) when the drawer is the topmost overlay.
`closeOnBackdrop`	`boolean`	`true`	Backdrop click requests close (cancelable). Modal only.
`showCloseButton`	`boolean`	`true`	Render the header close button.
`direction`	`"ltr" \| "rtl"`	`'ltr'`	Maps start/end placement to a physical edge; applied as the element’s dir.
`icons`	`Partial<DrawerIcons>`		Icon slot overrides.

Two-way bindings

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

Outputs

Output	Payload	Description
`(opened)`	`null`	After the drawer opened. Re-emits `aui-open`.
`(cancelled)`	`DrawerCloseDetail`	Before a user-initiated close; preventDefault keeps it open. Re-emits `aui-cancel`.
`(closed)`	`DrawerCloseDetail`	After the drawer closed. Re-emits `aui-close`.