title: angular dom takes forever to re-render
body: <p>Something has gone south in my code.</p>
  <p>i have basically commented everything out of my component so that i looks like this now:</p>
  <pre><code> &lt;div  *ngFor=&quot;let restaurant of restaurants&quot;&gt;
          {{restaurant.updated}}
      &lt;/div&gt;
  </code></pre>
  <p>And after my http call to my api (which takes about 500ms) i do this:</p>
  <pre><code>this.restaurants = results;
  </code></pre>
  <p>Then it takes about 10+ seconds for it to rerender. I have a lot of warning in my console but i haven't managed to figure out why those are there.</p>
  <p><a href="https://i.stack.imgur.com/yOBLD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yOBLD.png" alt="enter image description here" /></a></p>
  <p>as far as i know i dont have any &quot;mousewheel&quot; events in my app. And how can i figure out what &quot;load&quot; that took 3 seconds? And are these warnings acctually something that concerns my problem?
  Also the first time i do</p>
  <pre><code>this.restaurants = results;
  </code></pre>
  <p>It acts like it usually do and renders straight away.</p>
  <p>Profiler result:</p>
  <p><a href="https://i.stack.imgur.com/RCR2m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RCR2m.png" alt="enter image description here" /></a></p>
  <p>So after commenting everything out and taking one method at a time back i realizes this was the problem:</p>
  <pre><code> autocomplete.addListener(&quot;place_changed&quot;, () =&gt; {
                      const place = autocomplete.getPlace();
                      let foundCity = place.address_components.filter((address:any) =&gt; { if(address.types.some((type:any) =&gt; type == 'postal_town')){ return address} })[0].long_name;
                      if(foundCity){
                          this.userCity = foundCity;
                          
                          let location = place.geometry.location;
                          this.userLongitude = location.lng();
                          this.userLatitude = location.lat();
                     This row inside of the event   --&gt;  this.getRestaurants();
                      }
                  }, { passive: true });
  </code></pre>
  <p>It seems like when calling the getRestaurants() method which gets the restaurants from the db and then does:</p>
  <pre><code>this.restaurants = results;
  </code></pre>
  <p>Somehow blocks it from rendering.</p>
  <p>When I do this:</p>
  <pre><code>   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; (click)=&quot;getRestaurants()&quot;&gt;Click&lt;/button&gt;
  </code></pre>
  <p>It renders straight away. So how can i call getRestaurants() method after the place_changed event has happend?</p>