Github

Dialog

Dialogs display focused content in a modal surface with optional confirm and cancel actions.

Component variations

Actions

Dialog can be opened with footer actions or as a read-only modal.

Template Context

Pass runtime values into the slot template with the context option.

Long Form Content

Long content demonstrates max-height capping and internal content scrolling for overflow.

Usage Guidelines

Import

Import the dialog service in your component:

my.component.ts

Copy code

Define Dialog Content

Use an ng-template for dynamic slot content.

my.component.html

Copy code

Open Dialog

Call open() with template and configuration.

my.component.ts

Copy code

Pass Slot Context

Use the context option to provide runtime data to your template.

context-slot.ts

Copy code

Render Without Footer Actions

Omit action labels to keep the dialog read-only.

no-actions-dialog.ts

Copy code

Handle Output Result

The promise from open() identifies how the dialog was closed.

output-handling.ts

Copy code

Overflow Behavior

Dialog height is capped to calc(100vh - (var(--vd-scale-spacing-1600) * 2)). When content exceeds the available height, only the content area scrolls.

long-content-dialog.ts

Copy code

API Reference

Configuration Object (VdDialogConfig)

Properties passed to open().

Property
Type
Required
Default
Description
title
string
Yes
N/A
Title text displayed in the dialog header
contentTemplate
TemplateRef
Yes
N/A
Template rendered in the dialog 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. Result value is always 'primary'.
secondary
Secondary action button click
Returned when the secondary button is clicked. Result value is always 'secondary'.
close
Close icon, Escape key, or backdrop click
Returned when the dialog is dismissed without action button clicks.

Best Practices

When to Use

  • For focused tasks that require temporary modal attention
  • When content must be injected dynamically via templates
  • For review flows that need explicit confirm/cancel actions

When Not to Use

  • For long, multi-step flows (use dedicated pages or drawer)
  • For transient feedback (use toast or alert)
  • When users should keep interacting with background content

Design Guidelines

  • Keep title concise and action-oriented
  • Use clear primary and secondary action labels
  • Reserve the primary action for the most important outcome
  • Keep content scannable and avoid overcrowding the modal

Service playground

Customize dialog configuration and open it.

example.ts

Copy code