Migrating ArcGIS widgets that are hierarchically next to the Map component

[Insa_bel]

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?

[AnneFitz · Accepted solution]

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: 

• Programming patterns - Associate components with a Map or Scene component
• Compass component reference - referenceElement

[Insa_bel]

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!