ArtificialSenseDocs

Docs / Components

SenseDynamicDialogService

Programmatic modal dialog that hosts arbitrary components with configurable header, size, and position from @artificialsenselabs/ui.

Live demo: run nx serve showcase and open /components/dynamic-dialog (port 4202).

Overview

Category: Overlay. Shell selector: sense-dynamic-dialog. Import: import { SenseDynamicDialogService, SenseDynamicDialogRef } from '@artificialsenselabs/ui';

Prefer this service when you need to open a guest component from TypeScript without declaring a dialog in the template. For template-driven modals with projected content, use sense-dialog.

Accessibility

  • Dialog panel exposes role="dialog" with optional aria-labelledby header.
  • Modal layer stack (topmost Escape / focus-trap pause) shared with dialog, confirm-dialog, and other modals.
  • Focus trap and scroll blocking while modal; restores focus on close.
  • Escape honors closable; optional mask dismiss; localized close button label.