Insert object into array, refresh view of ngFor list, then scroll to new object's element in list?

#1

I have an HTML page using ngFor to show a list of <div> elements for each object in an array. Each <div> has a unique id that is generated using that object’s index in the array. I’ve tested this and it works.

Now, I have a button that triggers a function to insert a new object into the array. Once that new object is rendered in the HTML, I want the page to auto-scroll to it. I’m running into an issue where the function inserts the object, then tries to scroll to it before Angular has refreshed the view to render the <div>.

So how can I write a function to:

  1. Insert the object into the array
  2. AWAIT the refresh the view so that it appears in the HTML
  3. THEN scroll to that HTML element