Angular component in Map Popup Content

[WoraminSat]

Hi

Is there any way to insert Angular component into Map Popup Content?

For example ,

const dataPopup = { name : "John Doe" , departmentId : 1 };

const mapPopup = new Popup();

popup.content = "<my-custom-content [propsA]="dataPopup " />";

------------------

In React I use to create custom component with Virtual DOM, but I have no idea how to do with Angular Component.

If anyone has an idea to achieve this, please share it with me.

Thanks

Woramin S.

[ForrestLin]

Convert Angular component to Custom element

https://angular.dev/guide/elements

[ForrestLin]

This is how I create CustomContent (and PopupTemplate) using Angular component: PopupComponent.

import { Injector, Renderer2, RendererFactory2, inject } from "@angular/core";

import { NgElement, WithProperties, createCustomElement } from "@angular/elements";

import CustomContent from "@arcgis/core/popup/content/CustomContent";

_renderer2: Renderer2 = inject(RendererFactory2).createRenderer(null, null);

_injector = inject(Injector);

createPopupTemplate(): PopupTemplate {

    const popupTemplate = new PopupTemplate({

      title: this.title,

      outFields: ["*"],

      content: [this.createCustomContent()],

      actions: [],

      fieldInfos: []

    });

    return popupTemplate;

  }

  createCustomContent(): CustomContent {

    const customContent = new CustomContent({

      outFields: ["*"],

      creator: event => {

        this._graphic = event?.graphic;

        const popupEl = this.createPopupElement();

        return popupEl;

      }

    });

    return customContent;

  }

  createPopupElement(): NgElement & WithProperties<PopupComponent> {

    if (!customElements.get('popup')) {

      const popupElement = createCustomElement(PopupComponent, { injector: this._injector });

      customElements.define('popup', popupElement);

    }

    const popupElement: NgElement & WithProperties<PopupComponent> =                 this._renderer2.createElement('popup');

    return popupElement!;

  }