Expand widget content property works differently in ESM vs AMD

YuriWorkTech — Tue, 16 Apr 2024 21:49:56 GMT

Migrated from local AMD modules to ES modules via npm. Migration went smoothly with the exception of the Expand widget's content property no longer allows document.getElementById(). Using Angular for reference.

When using AMD for the ability to edit map notes layer, I had the following for html

then would initialize an expand widget with

const sketchExpand = new Expand({ expandIcon: 'pencil-tip', view: this.mapView, content: document.getElementById('sketchBar'), expandTooltip: 'Sketch', group: 'top-right' });

Now with the ES modules I keep getting an error stating content must be undefined | string | Node.

So I switched document.getElementById('sketchBar') to document.getElementById('sketchBar').innerHTML which works, but now i have buttons in the expand content that don't work and the html showing up where with the AMD the entire html content would be essentially moved into the expand widget content.

I'm not sure how to proceed. An ES module sample of the map notes layer example would be helpful.

Re: Expand widget content property works differently in ESM vs AMD

AndyGup — Thu, 18 Apr 2024 16:38:09 GMT

This might be an issue with the Angular syntax that you are using. Here's an example codepen using the ArcGIS ESM CDN (for prototyping-only) that shows getElementById() working: https://codepen.io/andygup/pen/poBxxxw?editors=1000.

With Angular try using "@viewChild": https://angular.io/api/core/ViewChild. And, here's an example usage of viewChild with "@arcgis/core": https://github.com/Esri/jsapi-resources/blob/main/esm-samples/jsapi-angular-cli/src/app/app.component.ts#L28

@ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef;

topic Re: Expand widget content property works differently in ESM vs AMD in ArcGIS JavaScript Maps SDK Questions

Expand widget content property works differently in ESM vs AMD

Re: Expand widget content property works differently in ESM vs AMD