Cannot detect lastroute update in Directions web component v4.32

[MarcStationsGPL]

Hi gents,
I tried to implement Directions Web components introduced in v4.32 javscript Arcgis API/

I don't find the right way to detect lastroute update once 2 stops are set.
I supposed lastRoute is not a direct property of "directionsWidget" object.

Thank you for your help

Here the way I do it :

inside HTML file
<arcgis-directions id='arcgisdirections' api-key='API_KEY' position='top-right' unit='kilometers' use-default-route-layer></arcgis-directions>

inside Javascript file

const directionsWidget = document.getElementById("arcgisdirections");

reactiveUtils.when(
() =>
directionsWidget.lastRoute &&
directionsWidget.lastRoute.routeInfo &&
directionsWidget.lastRoute.routeInfo.geometry,
() => {
console.log("New directions are set");
}

It is working fine with a classic Directions widget, full javascript initiated :

const directionsWidget = new Directions({
view: view,
apiKey: apiKey,
layer: routeLayer
});

[ReneRubalcava · Accepted solution]

You can use the `arcgisPropertyChange` event to check the state of the component. If the state is ready, than `lastRoute` has been updated.

<arcgis-map center="-118,34" zoom="12" item-id="45b3b2fb35e94ab09381d0caa0da5946">
  <arcgis-directions position="top-left" use-default-route-layer></arcgis-directions>
</arcgis-map>
<script type="module">
  const directionsElement = document.querySelector("arcgis-directions");
  directionsElement.addEventListener("arcgisPropertyChange", (e) => {
    if (
      event.detail.name !== "state" ||
      directionsElement.state !== "ready"
    ) {
      // You only care about when the `state` of the component is "ready"
      return;
    }
    
    if (directionsElement.lastRoute) {
      console.log("New directions are set");
    }
  })
</script>

https://codepen.io/odoe/pen/Pwwpxao?editors=1001

We can look at adding the `lastRoute` to trigger this change event as well.

[MarcStationsGPL]

Thank you so much ReneRubalcava !