topic Re: Custom UI component with Angular in ArcGIS JavaScript Maps SDK Questions

Custom UI component with Angular

ForrestLin — Wed, 16 Aug 2023 21:55:44 GMT

There is sample of Custom UI component with React and Vite:

https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-custom-ui

Is there any sample of Custom UI component with Angular?

Re: Custom UI component with Angular

AndyGup — Wed, 16 Aug 2023 23:05:00 GMT

Hi @ForrestLin there is not an Angular sample. However, the conceptual doc's Introduction spells out how to do it in any framework: https://developers.arcgis.com/javascript/latest/custom-ui/#introduction.

Re: Custom UI component with Angular

ForrestLin — Thu, 17 Aug 2023 11:31:04 GMT

If I have Angular component "my-ui", what's the Custom UI component? {<app-my-ui><app-my-ui>}?

Re: Custom UI component with Angular

ForrestLin — Thu, 17 Aug 2023 11:57:39 GMT

I want to create a CustomContent for popup. I have an Angular component "my-popup". Is it right?

createCustomContent(): CustomContent{

const contentPromise = new CustomContent({

outFields: ["*"],

creator: (event) => {

return `<app-my-popup></app-my-popup>`;

}

});

return contentPromise;

}

Re: Custom UI component with Angular

AndyGup — Fri, 18 Aug 2023 18:52:15 GMT

Yes, you seem to be on the right right track for integrating the CustomContent Class: https://developers.arcgis.com/javascript/latest/api-reference/esri-popup-content-CustomContent.html. The CustomContent.creator function can be used to return an HTMLElement. In your case this will be an Angular component. You'll need to pay attention to data binding and component life-cycle. Experiment and see how it goes. Please post your findings here so others can learn, or others may have already gone down this path and respond back.

Re: Custom UI component with Angular

ForrestLin — Sat, 19 Aug 2023 16:31:05 GMT

Thank you, Andy!

I found some clue: dynamic component loading (https://angular.io/guide/dynamic-component-loader#dynamic-component-loading).

It's using viewContainerRef of directive to create component and set up data:

const viewContainerRef = this.adHost.viewContainerRef;

viewContainerRef.clear();

const componentRef = viewContainerRef.createComponent<AdComponent>(adItem.component);

componentRef.instance.data = adItem.data;

But how to get ViewContainerRef of the popup content in our case?

Re: Custom UI component with Angular

ForrestLin — Sun, 10 Sep 2023 12:17:17 GMT

I have resolved this problem.

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

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

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

import { MyPopupComponent } from "../popup/my-popup.component";

@Injectable({

providedIn: 'root'

})

export class RendererService {

private _renderer2: Renderer2;

constructor(injector: Injector, rendererFactory: RendererFactory2) {

this._renderer2 = this._rendererFactory.createRenderer(null, null);

const myPopup = customElements.get('my-popup');

if (!myPopup ) {

const myPopup = createCustomElement(MyPopupComponent, { injector });

customElements.define('my-popup', myPopup);

}

public createCustomContent(): CustomContent {

const customContent = new CustomContent({

outFields: ["*"],

creator: (event) => {

const myPopup: NgElement & WithProperties<MyPopupComponent> = this._renderer2.createElement('my-popup');

myPopup.graphic = event?.graphic;

return myPopup;

}

});

return customContent;

}