Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Drawer

Drawer is an overlay panel that slides in from the right side of the screen and keeps the current page as context. It can contain any custom side content, including forms, filters, record details, settings, previews, history, activity feeds, help content, quick actions, or another secondary workflow.

Use it when the main screen should stay visible as context while related content opens beside it. Drawer can show a backdrop or stay non-blocking with [showBackdrop]="false". Do not use it for a centered modal workflow, short confirmation, mobile bottom action panel, or primary persistent application navigation.

Key Features:
  • Side overlay: Slides out from the right side of the screen.
  • Custom content: Project any content needed for the secondary panel.
  • Backdrop support: Use a blocking backdrop or a non-blocking drawer.
  • Overlay integration: Built on Angular CDK Overlay with close behavior for backdrop, outside click, and Escape.
PropTypeDefault
isOpen
Whether the drawer is open.
booleanfalse
showBackdrop
Whether the drawer should show a backdrop.
booleantrue
EventDescription
openedEvent emitted when the drawer has been opened.
closedEvent emitted when the drawer has been closed.