Dialog

Dialog opens a focused modal workflow above the current page. Open it with Dialog.open(ComponentOrTemplate, config), pass data through the config, and return a result with DialogRef.close(...) or ngs-dialog-close. Dialog content is usually structured with ngs-dialog-title, ngs-dialog-content, and ngs-dialog-actions.

Use Dialog for forms, editing records, creating objects, settings, detail views, wizard-like steps, scrollable content, and custom modal workflows where users must complete or close the task before returning to the page. Do not use it for a short binary confirmation, global message, mobile bottom action panel, or side inspector.

Dialog Service

The Dialog service is used to open modal dialogs.

Methods

Name	Description
`open(componentOrTemplateRef, config?)`	Opens a dialog with the specified component or template.
`closeAll()`	Closes all open dialogs.

Dialog Configuration

The DialogConfig object configures dialog behavior and appearance.

Property	Type	Description
`data`	`any`	Data passed to the dialog component.
`width`	`string`	Dialog width.
`height`	`string`	Dialog height.
`disableClose`	`boolean`	Prevents the dialog from closing when the backdrop is clicked or Escape is pressed.

Directives & Components

DialogTitle

Dialog title. Automatically generates a unique ID for ARIA.

Input	Type	Description
`id`	`string`	Unique title identifier.

DialogActions

Container for action buttons at the bottom of the dialog.

Input	Type	Description
`align`	`'start' \| 'center' \| 'end'`	Action button alignment. Defaults to `'end'`.

DialogClose

Directive for buttons that close the dialog.

Input	Type	Description
`ngsDialogClose`	`any`	Result used when closing the dialog.

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates