Angular google maps - View directions link is taking time to update origin & destination

Question

I have the below code to capture the origin and destination on click of view directions button. The problem is on click of view directions button, the href URL loads first before the onclick event completes its execution. How to load the href URL after the execution of function passed to click event. In the below code , I am capturing the lat and lng of origin and destination in getDirection method and once the values are available only , the external href url should be loaded. But in my case, for the first time click , since the values of origin and destination are not available the URL has empty value, whereas from the second click onwards , the values are available .

   <a (click)="getDirection(m.geometry.location.lat,m.geometry.location.lng)" href="https://www.google.com/maps/dir/?api=1&origin={{srcOriginLat}},{{srcOriginLng}}&destination={{srcDestinationLat}},{{srcDestinationLng}}&travelmode=driving" target='_blank'>Directions</a></button>


getDirection(dirLat: any, dirLng: any) {
    let srcLat, srcLng;
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {

      srcLat = position.coords.latitude;
      srcLng = position.coords.longitude;
      console.log('srcLatsrcLng1', srcLat, srcLng);
      this.dir = {
        origin: { latitude: srcLat, longitude: srcLng },
        destination: { latitude: dirLat, longitude: dirLng }
      };
         this.srcOriginLat = this.dir.origin.latitude;
      this.srcOriginLng = this.dir.origin.longitude;
      this.srcDestinationLat = this.dir.destination.latitude;
      this.srcDestinationLng = this.dir.destination.longitude;
      });
    }

  }