Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
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.

The NgStarter Angular Drawer component lets you show custom side content in a right-side overlay while keeping the current page as context. Use for any secondary side content or workflow that should open beside the current screen without navigating away: forms, filters, record details, settings, previews, history, activity feeds, help content, quick actions, inspectors, or other custom panels. It includes examples for Basic drawer, and Drawer without backdrop.

Basic drawer

Use Drawer for custom side content that should open beside the current screen while the page remains the user's context.

Drawer without backdrop

Use a drawer without backdrop when the side panel should stay non-blocking and the page behind it can remain usable.