Dialog

Overview

Import DialogComponent and mount <gog-dialog /> once — typically near the root of your app. Every DialogService.open() call renders through that single outlet, so it only needs to exist once no matter how many places call it.

import { DialogComponent, DialogService } from '@guildofgleks/ui/dialog';

@Component({
  // ...
  imports: [DialogComponent],
})
export class AppComponent {
  // Mount <gog-dialog /> once, near the root of your app.
}

Import the dialog and DialogService from @guildofgleks/ui/dialog, with the confirmation dialog and the dialog tokens. The root package has not exported it since 21.14.0 — in 21.13.0 it still did, deprecated — and that is what lets a dialog opened only behind a lazy route keep its own code out of your app's initial bundle. What it imports from the root does not move: the button, icon and scroll area it renders belong to the root package, and load wherever your first page already loads it. Measured on a fresh app with the table, datepicker, calendar and dialog behind one lazy route: the initial bundle went from 101.2 kB to 88.2 kB, and 27 kB of those components' root dependencies stayed in it.

Basic usage — the library ships a ready-made ConfirmationDialogComponent for confirm/cancel prompts:

<gog-button (gogClick)="openConfirm()">Delete workspace</gog-button>
<gog-dialog />

Last result: No dialog closed yet.

Examples

<gog-button (gogClick)="openCustomContent()">Open custom dialog</gog-button>
<gog-dialog />

<gog-dialog />

<gog-dialog />

<gog-dialog />

<gog-dialog />

API Reference

DialogConfig

Passed to DialogService.open(config).

DialogService methods

Injection tokens

Used inside the component passed as DialogConfig.component.

ConfirmationDialogComponent

A ready-made dialog body for confirm/cancel prompts — pass it as component with a ConfirmDialogData object as data: { title, description, confirmText, cancelText }. It closes itself with true on confirm and false on cancel.

Styling Tokens

Every CSS custom property the dialog paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.