Как добавить динамический контент в основную оверлейную панель в угловом проекте?

Question

Я хочу, чтобы содержимое на основной панели динамически отображалось.контент будет загружен из API.Мне нужно отобразить этот контент в оверлейной панели при открытии.Может кто-нибудь объяснить это, как это сделать в угловых.

Answer 1

Я не знаю, как выглядят ваши данные, но идея такова:

TS:

public data;

@ViewChild(OverlayPanel)
private overlayPanel: OverlayPanel;

functionCalledWhenYouWantToDisplayOverlayPanel() {
    this.yourService.getDataFromAPI().subscribe((data) => {
        this.data = data;
        this.overlayPanel.show();
    });
}

HTML:

<p-overlayPanel appendTo="body">
    {{ data }}
</p-overlayPanel>