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:
- Insert the object into the array
- AWAIT the refresh the view so that it appears in the HTML
- THEN scroll to that HTML element