This sample demonstrates how to watch for changes in your map components application by listening to events and watching attributes. The sample prints messages to the output message div as changes happen in the application.
To observe changes directly on component properties and state using reactive, see the watch for changes in components using reactiveUtils sample.
Listen for component ready
The sample shows how to listen for the arcgisViewReadyChange event. This is typically used as an indicator that you can start interacting with the application.
// Listen for when the view first loads
await viewElement.viewOnReady();
const zoom = viewElement.zoom;
let message = `<br><span>viewOnReady:</span> initial zoom is ${zoom}`;
displayMessage(message);
const portalItem = viewElement.map.portalItem;
message = `<br><span>viewOnReady:</span> WebMap title is ${portalItem?.title}`;
displayMessage(message);
Listen for property changes
This code snippet shows the pattern for listening for changes to the component's properties via the arcgis event. The event fires whenever there is a change to any of the properties, for example, zoom, basemap, and center. The event callback returns the current values for all of the map component's properties, even ones that didn't change. For example, if the zoom level changes, the basemap value will stay the same.
// Listen for property changes on the view after it has been loaded.
viewElement.addEventListener("arcgisViewChange", async (event) => {
const { zoom, basemap } = event.target;
const message = `<br><span>arcgisViewChange:</span>
zoom has changed to ${zoom} and basemap is ${basemap?.title}`;
displayMessage(message);
});
For more information, see the Watch for changes in web components guide topic.