Basic — Panel.DialogPanel
<app-dialog>
The default treatment: a titled panel with a close button and a content template. This project summary adds tags, progress and details, and can be dragged by its header.
Sizes — DialogWidth
DialogWidth / DialogHeight
Width and height are panel classes. The *Max variants cap at the viewport rather than a fixed width.
Drawer — Panel.DrawerPanel
Panel + DrawerPosition
A side drawer is a panel-class combination, usually opened with hasBackdrop: false.
Confirm — Panel.ConfimPanel
Panel.ConfimPanel
The shared ConfirmDialogComponent: a short question, a warning and one clear action. Resolves true when confirmed.
Fullscreen — fullScreen
Panel.FullscreenPanel
fullScreen: true adds a maximise toggle; app-dialog then swaps the panel classes itself.
Loading — loading
<skeleton>
DialogData.loading swaps the body for a skeleton while the header and footer stay put.
Draggable — dragDisabled
cdkDrag
app-dialog defaults dragDisabled to true, so dragging is opt-in. Drag from the header.
Chrome — DialogData.classes
DialogLayoutClasses
gray, showCloseBtn and the classes map control the surrounding chrome.
Wiring it up — MatDialog, MAT_DIALOG_DATA, MatDialogRef
the four files
End to end from a consuming component: what goes in the caller’s .ts, the dialog’s own .ts and .html, and the payload interface between them.