topic Re: Migrating ArcGIS widgets that are hierarchically next to the Map component in ArcGIS JavaScript Maps SDK Questions

Migrating ArcGIS widgets that are hierarchically next to the Map component

Insa_bel — Thu, 22 Jan 2026 08:16:04 GMT

We are currently migrating our ArcGIS widgets to the new web components, but we have encountered some ambiguities in the documentation.

In our Angular application, we use a large number of widgets that are positioned outside the map component — for example, widgets that are (deeply) nested within navigational tabs.

Currently, we are assigning the view directly to the nested components following the documentation.

An example of this approach (compass positioned within a header) can be found here: https://codepen.io/insabelter/pen/RNRgBEy?editors=1111

At the same time, the documentation states that this approach should be avoided:

Docs: https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-compass/#methods

What is your recommended approach for migrating such components that are not direct children of the map-component?

Re: Migrating ArcGIS widgets that are hierarchically next to the Map component

AnneFitz — Thu, 22 Jan 2026 14:45:10 GMT

Hi, you can use the reference-element attribute to associate the component with your map. Just set the reference-element to the map's ID and that will connect them! Here's an updated version of your codepen: https://codepen.io/annefitz/pen/PwzjgLw?editors=1001

Some documentation that may be helpful:

Re: Migrating ArcGIS widgets that are hierarchically next to the Map component

Insa_bel — Tue, 21 Apr 2026 09:05:23 GMT

Thank you for this solution!

I was skeptical about whether this would work with Angular components, since the id is set in a different component than the one containing the element where the reference-element is defined.

But it seems to work!