Retrieve elements created by ngFor in ngAfterViewInit

Question

I\'m implementing a lazy image loader in my Angular (5) app, and am curious how I can avoid having to call setTimeout() in my ngAfterViewInit(), if

Answer 1

You can use the requesAnimationFrame API.

Your problem is that even though Angular told the browser to render the images, they are not rendered yet, it takes some times for it to do so and update the DOM, that's why your array is empty.

The requestAnimationFrame API asks for the browser to tell you (via a callback method) when it's done with it's current tasks, when rendering is complete.

ngAfterViewInit(): void {
  window.requestAnimationFrame(() => {
    //place your code here
  })
}