Github

Drawer

A drawer is a panel that slides in from the side of the screen.

Component variations

Sizes

Small, medium, and large drawers with 1, 2, and 3 column layouts

Slot Content Flexibility

The content slot can render forms, tables, contextual summaries, or read-only views.

Usage Guidelines

Import

Import the drawer service in your component:

my.component.ts

Copy code

Define Drawer Content

Use an ng-template to define the content injected into the drawer.

my.component.html

Copy code

Open Drawer

Call the open() method with the template and configuration.

my.component.ts

Copy code

Size Configuration

Change the size to control width and columns: sm 320px / 1 column, md 560px / 2 columns, lg 920px / 3 columns. Grid items are top-aligned and keep intrinsic height (rows do not stretch to fill the drawer).

size-example.ts

Copy code

Pass Slot Context

Use the context option to inject runtime data into the slot template.

context-slot.ts

Copy code

Handle Output Result

The promise from open() tells you which action closed the drawer. Custom action labels do not change result values.

output-handling.ts

Copy code

Form Submit Handling

For form slots, persist form data only when the result is 'primary'.

form-submit-handling.ts

Copy code

API Reference

Configuration Object (VdDrawerConfig)

Properties passed to the open() method. The close icon button is always visible in the drawer header.

Property
Type
Required
Default
Description
title
string
Yes
N/A
Title text displayed in the drawer header
size
'sm' | 'md' | 'lg'
No
'md'
Drawer size with fixed widths and layout: sm=320px (1 column), md=560px (2 columns), lg=920px (3 columns)
contentTemplate
TemplateRef
Yes
N/A
Template rendered inside the drawer content area
context
any
No
undefined
Context object passed to the content template
primaryActionLabel
string
No
undefined
Primary action button label. Clicking this button resolves open() with 'primary'.
secondaryActionLabel
string
No
undefined
Secondary action button label. Clicking this button resolves open() with 'secondary'.

Outputs (Promise Result)

Result returned by open() after user interaction.

Result
Trigger
Description
primary
Primary action button click
Returned when the primary button is clicked. The result key remains 'primary' regardless of primaryActionLabel.
secondary
Secondary action button click
Returned when the secondary button is clicked. The result key remains 'secondary' regardless of secondaryActionLabel.
close
Close icon, Escape key, or backdrop click
Returned when the drawer is dismissed without clicking primary or secondary action.

Best Practices

When to Use

  • For secondary tasks that should not block the main flow
  • When editing a subset of data alongside a primary view
  • For review and approval flows that need additional context
  • To surface forms or details without full navigation

When Not to Use

  • For destructive confirmations (use confirmation dialog instead)
  • When the content requires full-screen focus
  • For multi-step processes that require navigation

Design Guidelines

  • Keep primary actions aligned to the right in the footer
  • Use concise titles and clear field labels
  • Choose drawer size based on form complexity
  • Limit content to avoid excessive scrolling

Service playground

Customize the drawer configuration and open it.

example.ts

Copy code