BasemapToggle on toggle event not working in ArcGIS Javascript 4.x

The following code worked is suppose to work in ArcGIS Javascript API 4.x:

basemapToggle.on('toggle', function(event){
  console.log("current basemap title: ", event.current.title);
  console.log("previous basemap title: ", event.previous.title);
});

Here is the reference:

https://totalapis.github.io/api-reference/esri-widgets-BasemapToggle.html

But the event never occurs. Any ideas what could be happening?

Solution

I do not think that works, at least the official API docs (ArcGIS JS API - BasemapToggle) do not specify any event for BasemapToggle.

But, if you want to know when the toggle occurs, you can listen changes on the property activeBasemap.

Here I take an ESRI example (ArcGIS JS Samples - Intro to widgets using BasemapToggle) and modify it to show you that,

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to widgets using BasemapToggle | Sample | ArcGIS Maps SDK for
      JavaScript 4.26
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.26/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/BasemapToggle"
      ], (Map, MapView, BasemapToggle) => {
        // Create the Map with an initial basemap
        const map = new Map({
          basemap: "topo-vector"
        });

        // Create the MapView and reference the Map in the instance
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-86.049, 38.485],
          zoom: 3
        });

        // 1 - Create the widget
        const toggle = new BasemapToggle({
          // 2 - Set properties
          view: view, // view that provides access to the map's 'topo-vector' basemap
          nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
        });

        // ----------------------------
        // Watch changes of the basemap
        toggle.watch('activeBasemap', function (basemap) {
            console.log("current basemap title: ", basemap.title);
        });
        // ----------------------------

        // Add widget to the top right corner of the view
        view.ui.add(toggle, "top-right");
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>