Dialog
A window over the page for a form, a confirmation or details.
Service
Open a component from code and get its result back in closed.
injectDialogData() reads data inside the dialog; [txDialogClose]="value" closes it with a result. Focus moves to the first field and comes back to the button.
Template
<tx-dialog [(visible)]> keeps the dialog in the template. header names it, the content scrolls, <tx-dialog-footer> holds the actions.
Form
A long form in a dialog. Select, date picker and other panels open over the dialog, flip up when the field sits near the footer, follow the field while the body scrolls and close with the first Escape — the second one closes the dialog.
Sizes
size picks a preset width; width sets your own. breakpoints changes the width below a viewport width — resize the window with the responsive one open.
Positions
position places the dialog in the middle (default), at an edge or in a corner, keeping the token inset from the viewport.
Scrolling
Long content scrolls between a fixed header and footer, and the page behind does not scroll while the dialog is open.
Guard
canClose runs before the dialog closes — by Escape, the mask, the close button or close(). Here it opens a second dialog on top (an alertdialog); Escape closes the top one first.
Maximizable
maximizable adds a maximize / restore button, draggable lets the header move the dialog within the viewport. [modal]="false" keeps the page usable behind it.
Design tokens
dt changes the tokens of one dialog — panel, mask, header, content and footer; override dialog in the preset for all of them.