How to get current Basemap in ArcGIS for JavaScript 4.4 using BasemapGallery widget

Question

I am trying to get the current basemap after user selection, in the sandbox provided by ArcGIS, sandbox link.

I added a piece of code:

basemapGallery.on("selection-change", function() { alert("Here!"); });

It doesn't seem to work anymore. "Here" wasn't triggered when I switched basemaps. And no error messages show up.

Perhaps something changed from ArcGIS for Javasript 3.X to 4, since all answers I found online are working well on 3.20 or before. But no answer on version 4.4 was given.

Also it would be better to teach me how to make it work combined with the expand widget. sandbox link.

Answer 1

I got an email response from an Esri representative. Copied below:

"BasemapGallery doesn't have any events. If you would like to execute custom behavior whenever the active basemap changes, or the source of the BasemapGallery changes, then this can be handled by setting up a watch on the appropriate property.

https://developers.arcgis.com/javascript/latest/guide/working-with-props/index.html#watching-properties"

Following the provided example, what you should be using is:

var handle = basemapGallery.watch('activeBasemap', function(newValue, oldValue, property, object) {
   alert("Here!");
   console.log("New value: ", newValue,      // The new value of the property
               "<br>Old value: ", oldValue,  // The previous value of the changed property
               "<br>Watched property: ", property,  // In this example this value will always be "basemap.title"
               "<br>Watched object: ", object);     // In this example this value will always be the map object
  });