Execute function after DOM has finished rendering

Question

I recall reading the excerpt below from a blog.

$timeout adds a new event to the browser event queue (the rendering engine is already in this queue) so it will complete the execution before the new timeout event.

I'm wondering if there is a better way in angular/ javascript than using

setTimeout(() => {  
    // do something after dom finishes rendering
}, 0);

to execute code when the DOM has completely finished a task such as updating an *ngFor and rendering the results on the page.

Answer 1

You might try the ngAfterViewInit life-cycle hook, which is the chronologically last single-fire life-cycle hook.

https://angular.io/guide/lifecycle-hooks

It works much like ngInit but it fires after the view and child views have initialized.

If you need something that fires every time the DOM finishes you can try ngAfterViewChecked or ngAfterContentChecked.