Disable button while waiting for google maps directionService

Question

I am trying to disable a html button while waiting for google maps service call, in my case, when using google maps service to trace route with multiple waypoints and slow 3G throttling, the button should be disabled until tracing the new route .

calculateRoad(departure: any, arrival: any) {
  const request = {
    origin: departure,
    destination: arrival,
    waypoints: waypts,
    optimizeWaypoints: false,
    travelMode: this.getTravelModeFromVehicleType(vehicleType),
  };
  this.googleMapComponent.directionsService.route(request, (response, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
    }
    else if (vehicleType == Model.VehicleType.Bicycle && status == google.maps.DirectionsStatus.ZERO_RESULTS) {
    }
    else {
    }
    this.googleMapComponent.directionsDisplay.setDirections(response);
  });
}

Answer 1

When making request you can set some default value/state/behaviorsubject or something to be true like:

let loading = true;

then in the request where the new route is set you just need to set loading to be false:

loading = false;

In html file:

(if loading is true disable button)

<button [disabled]='loading'>...</button>