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, accessibility, sizing, and container affordances such as the built-in close button.

Property	Type	Description
`data`	`any`	Data passed to the dialog component.
`width`	`string`	Dialog width.
`height`	`string`	Dialog height.
`minWidth` / `minHeight`	`string \| number`	Minimum dialog dimensions. Numeric values are treated as pixels.
`maxWidth` / `maxHeight`	`string \| number`	Maximum dialog dimensions. Numeric values are treated as pixels.
`hasBackdrop`	`boolean`	Controls whether the dialog opens with a backdrop.
`backdropClass` / `panelClass`	`string \| string[]`	Additional classes applied to the backdrop or overlay panel.
`disableClose`	`boolean`	Prevents the dialog from closing when the backdrop is clicked or Escape is pressed.
`autoFocus`	`boolean \| string`	Controls which element receives focus when the dialog opens.
`restoreFocus`	`boolean`	Restores focus to the previously focused element when the dialog closes.
`ariaLabel` / `ariaLabelledBy` / `ariaDescribedBy`	`string \| null`	Accessible labeling and description options for the dialog.
`role`	`'dialog' \| 'alertdialog'`	ARIA role for the dialog container.
`closeOnNavigation`	`boolean`	Controls whether the dialog closes when browser navigation occurs.
`showCloseButton`	`boolean`	Shows the built-in icon close button in the dialog container. Defaults to `false`.

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