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 · Accepted solution]

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!;

  }

[WoraminSat]

Sorry for the late response. I have been very busy with my projects.

Anyway, I tried your example and adapt it to my code.

This is how I create from your example

TestPopupComponent (HTML & Typescript)

<p>This is the message from input --- {{message}}</p>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'mea-test-popup-component',
  templateUrl: './test-popup-component.component.html',
  styleUrls: ['./test-popup-component.component.scss']
})
export class TestPopupComponentComponent {
  @Input() message: string = ''
}

 MainComponent

 import { Injector, Renderer2, RendererFactory2, inject } from '@angular/core';
import { NgElement, WithProperties, createCustomElement } from '@angular/elements';
import CustomContent from '@arcgis/core/popup/content/CustomContent';
import { TestPopupComponent } from './test-popup-component/test-popup.component';   

//From mapView on click
displayPopup(mapPoint: Point){
        if (!customElements.get('mea-test-popup-component')) {
            const popupElement = createCustomElement(TestPopupComponent, { injector: this._injector });
            customElements.define('mea-test-popup-component', popupElement);
        }
        const testComponent: NgElement & WithProperties<TestPopupComponent> = this._renderer2.createElement('mea-test-popup-component');
        testComponent.message = 'Hello, world!';
        this.mapView.openPopup({
            content: testComponent,
            location: mapPoint,
        });
    }

The Result

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

Thank you very much for your help!

[ForrestLin]

@WoraminSat 

Great!