chrome:seo.title.page

cdk-preview:cdk-overlay.panels-receive-close-callback

demo-preview:hints.category.assistive:

Tip

SR

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>

chrome:demo.events.empty

generated:catalog.entry.cdk-overlay.title