topic Re: Angular component in Map Popup Content in ArcGIS JavaScript Maps SDK Questions

Angular component in Map Popup Content

WoraminSat — Tue, 27 Aug 2024 07:14:41 GMT

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.

Re: Angular component in Map Popup Content

ForrestLin — Tue, 27 Aug 2024 11:43:05 GMT

Convert Angular component to Custom element

https://angular.dev/guide/elements

Re: Angular component in Map Popup Content

ForrestLin — Tue, 27 Aug 2024 15:36:39 GMT

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

}

Re: Angular component in Map Popup Content

WoraminSat — Fri, 13 Sep 2024 10:08:04 GMT

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!

Re: Angular component in Map Popup Content

ForrestLin — Fri, 13 Sep 2024 12:06:29 GMT

@WoraminSat

Great!