Dialog

Preview

A working preview of Dialog in the Brickclay style. Try it.

BkDialog: Comprehensive Demo

Custom dialog system built on Angular CDK Overlay. Every button below opens a real dialog showcasing a specific feature.

Playground

Tweak the controls, click Open Dialog, and compare the generated dialog.open() call against the actual result returned by afterClosed().

Copythis.dialog.open(BkSampleBasicDialog, {
  width: '460px',
  animation: 'zoom',
  position: undefined,
  closeOnBackdrop: true,
  closeOnEsc: true,
  disableClose: false,
  hasBackdrop: true,
  lockScroll: true,
  data: {
    title: 'Playground Dialog',
    message: 'Tweak the controls, then click "Open Dialog" to see the change live.',
  },
});

1, Animation Presets

Seven WAAPI animation presets. No @angular/animations dependency.

2, Positioning

Offset from the default centred position using position: { top, bottom, left, right }. Mapped to CDK's GlobalPositionStrategy.

3, Sizing

width, height, minWidth, minHeight, maxWidth, maxHeight, applied on the CDK overlay pane.

4, Close Behaviour

Fine-grained control: closeOnBackdrop, closeOnEsc, disableClose, and hasBackdrop work independently.

5, Data Passing & Results

Pass arbitrary data via config.data, inject with @Inject(DIALOG_DATA), return results via dialogRef.close(value).

5b, Form Controls Inside a Dialog

bk-select, bk-hierarchical-select, bk-dropdown, bk-input, bk-textarea, bk-checkbox and bk-toggle together in one form, to confirm their overlay panels escape the dialog's clipped/scrollable content (appendToBody on the select controls) instead of being cut off.

6, Convenience Helpers

dialog.confirm() and dialog.alert(), pre-configured shortcuts.

7, Dialog Stacking

CDK manages z-index stacking and focus trap automatically. Open multiple dialogs and see them layer correctly.

7b, Modal Opens a Smaller Modal

Click the button to open a regular modal; inside it, another button opens a small modal on top. The child modal's result is shown back in the parent once it closes.

8, Custom Styling

Use panelClass to add custom CSS classes on the CDK overlay pane, or override CSS variables (--bk-dialog-panel-bg, --bk-dialog-panel-radius, --bk-dialog-panel-shadow).

9, Accessibility

role, ariaLabel, autoFocus, restoreFocus, CDK focus trap keeps Tab inside the dialog.

10, Event Observables

afterOpened(), afterClosed(), backdropClick(), keydownEvents(), subscribe to lifecycle and interaction events.

11, Scroll Strategy

lockScroll: true (default) blocks body scroll. lockScroll: false keeps body scrollable.

Result Log

Open a dialog and interact with it to see results here.