title: Reverse geocoding using Angular
body: <p>I am using reverse geocoding in Angular app.</p>
  
  <p>The needed script is added in index.html</p>
  
  <pre><code>&lt;script async defer src="https://maps.googleapis.com/maps/api/js"&gt;
  &lt;/scrip&gt;
  </code></pre>
  
  <p>and the component file looks like this</p>
  
  <pre><code>import { Component } from '@angular/core';
  declare const google: any;
  
  export class MapComponent {
  
    lat;
    lng;
    address;
  
    constructor() {
      this.locate();
    }
  
    public locate() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          position =&gt; {
            this.lat = position.coords.latitude; // Works fine
            this.lng = position.coords.longitude;  // Works fine
  
            let geocoder = new google.maps.Geocoder();
            let latlng = new google.maps.LatLng(this.lat, this.lng);
            let request = {
              latLng: latlng
            };
  
            geocoder.geocode(request, (results, status) =&gt; {
              if (status == google.maps.GeocoderStatus.OK) {
                if (results[0] != null) {
                  this.address = results[0].formatted_address;  //&lt;&lt;&lt;=== DOES NOT WORK, when I output this {{ address }} in the html, it's empty
                  console.log(this.address);  //&lt;&lt;&lt;=== BUT here it Prints the correct value to the console !!!
                } else {
                  alert("No address available");
                }
              }
            });
          },
          error =&gt; {
            console.log("Error code: " + error.code + "&lt;br /&gt; Error message: " + error.message);
          }
        );
      }
    }
  }
  </code></pre>
  
  <p>and in the component html file, It's supposed to output the address</p>
  
  <pre><code>&lt;div&gt;{{ lat }}&lt;/div&gt;        // Works fine
  &lt;div&gt;{{ lng }}&lt;/div&gt;        // Works fine 
  &lt;div&gt;{{ address }}&lt;/div&gt;    // Deosn't Work, EMPTY
  </code></pre>
  
  <p>but it's always empty,
  however this line</p>
  
  <pre><code>console.log(this.address);
  </code></pre>
  
  <p>printed the correct value.</p>