Custom UI component with Angular

ForrestLin

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?

ForrestLin

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;

  }

}