Prism Docs

Dialogs & Modals

Modal components for focused interactions and user confirmations.

Basic Dialog

Dialog with Card Content

Form Dialog

Confirmation Dialog

Service-Based Dialog

Position & Animation Variants

PrismDialogComponent API

NameTypeDefaultDescription
visiblemodel<boolean>falseTwo-way binding for dialog visibility state. Use [(visible)]="mySignal"
headerstring''Title text displayed in the dialog header
widthstring'500px'Custom width for the dialog modal window
position'center' | 'top' | 'bottom' | 'left' | 'right''center'Position and animation direction for the dialog. Center scales in, sides slide from edges
dismissableMaskbooleantrueWhether clicking the backdrop closes the dialog. Set to false for modals that require explicit action
onHideOutputEmitterRef<void>-Event emitted when dialog closes (via X button or dismissable mask click)

PrismDialogService API

NameTypeDefaultDescription
open<T, D, R>(component, config)PrismDialogRef<R>-Opens a dialog dynamically with the specified component. Returns a DialogRef for controlling the dialog lifecycle
config.dataD (generic)undefinedData to inject into the dialog component via DIALOG_DATA token
config.headerstring''Dialog header title
config.widthstring'50vw'Dialog width (supports px, %, vw, etc.)
config.position'center' | 'top' | 'bottom' | 'left' | 'right''center'Animation direction and position
config.dismissableMaskbooleantrueEnable/disable backdrop dismissal

Usage Example:

const ref = this.dialog.open(MyComponent, {
  header: 'Title',
  data: { userId: 123 },
  width: '600px'
});

ref.afterClosed$.subscribe(result => {
  // Handle result
});

PrismDialogRef API

NameTypeDefaultDescription
close(result?: R)void-Closes the dialog and optionally passes a result to afterClosed$ subscribers
afterClosed$Observable<R | undefined>-Observable that emits when dialog closes. Completes after emission. Subscribe to handle dialog results

Injection Tokens

NameTypeDefaultDescription
DIALOG_DATAInjectionToken<unknown>-Token for injecting data into dynamically created dialog components. Use inject(DIALOG_DATA) in your component
PrismDialogRefClass-Injectable reference to control the dialog from within the dynamically created component. Use inject(PrismDialogRef)

Component Usage:

export class MyDialogComponent {
  ref = inject(PrismDialogRef);
  data = inject(DIALOG_DATA);

  save() {
    this.ref.close({ saved: true });
  }
}