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.

The NgStarter Angular Dialog component lets you open custom focused modal workflows above the current page. Use Dialog.open(ComponentOrTemplate, config) 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. It includes examples for Basic Dialog, Dialog With Scrollable Content, Dialog Sizing (height, min-height), and Dialog scrollable content.

Basic Dialog

Use Dialog when a page needs a custom modal workflow with its own component, data, actions, and close result.

What's your name?

Dialog With Scrollable Content

Use scrollable dialog content when the modal task has more content than fits comfortably in the viewport while the title and actions should stay structured.

Dialog Sizing (height, min-height)

Configure width, height, minimum size, maximum size, backdrop, autofocus, and close behavior through DialogConfig when the default modal size is not enough for the workflow.