generated:catalog.entry.dialog.title
generated:catalog.entry.dialog.description
@xngui/components/dialogimport { XDialogService } from '@xngui/components/dialog';chrome:demo.section
chrome:demo.preview
import { inject } from '@angular/core';
import { XShowcaseDialogPanel } from './dialog-panel';
import { XDialogService } from '@xngui/components/dialog';
export class ExampleComponent {
private readonly xDialogService = inject(XDialogService);
openDialog(): void {
this.xDialogService.open(XShowcaseDialogPanel, {
title: 'Edit note',
data: {
message: 'Unsaved edits stay in this panel until you close it.',
},
size: 'md',
closeOnBackdrop: true,
closeOnEscape: true,
}).afterClosed.subscribe((result) => {
// handle result
});
}
}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-dialog
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
sizeXDialogSize—Panel width tier — `'full'` spans the viewport. Falls back to XConfigService when unset.
ariaLabelstring—Accessible name when no visible title is labelled via `ariaLabelledBy`.
ariaLabelledBystring—ID of the element that labels the dialog (typically the header title).
ariaDescribedBystring—ID of the element that describes supplementary dialog content.
closeOnBackdropboolean—Dismiss when the backdrop is clicked — falls back to XConfigService when unset.
closeOnEscapeboolean—Dismiss when Escape is pressed — falls back to XConfigService when unset.