Migrating ArcGIS widgets that are hierarchically next to the Map component

Question

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 Answer

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