Overlay

Preview

Panels receive a close(result) callback via data. Backdrop click and Escape dismiss without a result.

import { inject, viewChild } from '@angular/core';

import type { XOverlayCloseFn, XOverlayTemplateContext } from '@xngui/cdk/overlay';

import { XOverlay } from '@xngui/cdk/overlay';

const overlay = inject(XOverlay);

const overlayTpl = viewChild.required<TemplateRef<XOverlayTemplateContext<{ message: string }>>>('overlayTpl');

const ref = overlay.open<'saved'>({

content: overlayTpl(),

data: { message: 'Template context — close is injected automatically.' },

hasBackdrop: true,

width: 320,

scrollStrategy: 'block',

});

ref.afterClosed.subscribe((result) => {

if (result === 'saved') { * … * }

});

// <ng-template #overlayTpl let-message="message" let-close="close">

// <p>{{ message }}</p>

// <button (click)="close('saved')">Save</button>

// </ng-template>

Interact with the preview — events will appear here.