HTML list won't update immediatly

I have an Angular app that fetches places from a text request to Google Places API. Here it how it looks like:

this.placesService.textSearch(request, (results, placeStatus) => {
  if (placeStatus === google.maps.places.PlacesServiceStatus.OK) {
    for (let i = 0; i < results.length; i++) {
      const place = results[i];
      const photo = results[i].photos[0].getUrl({ 'maxWidth': 150, 'maxHeight': 150 })
      this.getDistance(new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng()), 
(result, status) => {
        if (status === google.maps.DistanceMatrixElementStatus.OK) {
          const distance: string = result.rows[0].elements[0].distance.text;
          const duration: string = result.rows[0].elements[0].duration.text;
          this.places.push(new Place(photo, place.name, place.formatted_address, distance, duration));
        }
      });
      if (i === 4) {
        break;
      }
    }
  }
  console.log(this.places);

As you can see. I log the places Array at the end of the process. It displays correct informations. However, it doesn't update my front as fast as the console.log. Here is my template:

<ol class="nearby-places">
  <div *ngFor="let place of places; let i = index;">
    <li class="card">
      <figure>
        <img src="" />
      </figure>
      <div class="info-container">
        <div>
          <div class="name">
            <p></p>
          </div>
          <div class="address">
            <p></p>
          </div>
        </div>
        <div class="list-nb">
          <h2>
            
          </h2>
        </div>
      </div>
    </li>
    <hr *ngIf="i+1 !== places.length">
  </div>
</ol>

it takes 10 seconds before displaying the results.
Is there a way to say to refresh right away?


from HTML list won't update immediatly