Skip to main content
cngx-src documentation

CngxDialogOpener

InjectablePrimaryv0.1.0

projects/common/dialog/dialog/dialog.service.ts

GitHub

Import#

import { CngxDialogOpener } from '@cngx/common/dialog'

Description#

Service for opening dialogs programmatically.

Works like MatDialog.open() - pass a component type and config, get back a typed CngxDialogRef<T>.

Must be provided via provideDialog().

Open a component dialog

const ref = this.dialog.open<User>(EditUserDialog, {
  data: { userId: 123 },
});

ref.afterClosed().subscribe(result => {
  if (result !== 'dismissed') saveUser(result);
});

Inside the dialog component

class EditUserDialog {
  private readonly data = inject(CNGX_DIALOG_DATA) as { userId: number };
  private readonly dialogRef = inject(DIALOG_REF) as DialogRef<User>;

  save(user: User) { this.dialogRef.close(user); }
}

Related#

Index#

Methods

closeAllopenopenopen

Methods#

closeAll#void

Dismiss all programmatically opened dialogs.

Calls dismiss() on each open dialog in reverse order (most recent first). Useful for route guards or global teardown.

open#CngxDialogRef
open(component: Type, config?: CngxDialogConfig<D>)

Open a dialog with the given component.

@paramcomponentType
  • The component type to render inside the dialog.
@paramconfig?CngxDialogConfig
  • Optional dialog configuration.

A typed CngxDialogRef<T> for reading the result and controlling the dialog.

open#CngxDialogRef
open(templateRef: TemplateRef, config?: CngxDialogConfig<D>)

Open a dialog with the given template.

@paramtemplateRefTemplateRef
  • The template to render inside the dialog.
@paramconfig?CngxDialogConfig
  • Optional dialog configuration.

A typed CngxDialogRef<T>.

open#CngxDialogRef
open(content: Type | TemplateRef, config: CngxDialogConfig<D>)
@paramcontentType | TemplateRef
@paramconfigCngxDialogConfig= {}
Enter to selectArrow Down Arrow Up to navigateEsc to close