afterRender and afterNextRender phases

Nhan Nguyen - Nov 26 '23 - - Dev Community

The afterRender and afterNextRender functions introduced in Angular v16.2 can now specify a phase option.

Angular uses this phase to schedule callbacks to improve performance.

There are 4 possible values, and they run in the following order:
EarlyRead: When you need to read the DOM before writing to the DOM.
Write: Needed if you want to write to the DOM, for example, to initialize a chart using a third-party library.

MixedReadWrite: Default, but should be avoided if possible to use a more specific phase.
Read: Recommended if you only need to read the DOM.

I think we should be able to use Read and Write in most cases. EarlyRead and MixedReadWrite degrade performances, so they should be avoided if possible.

Image description


Let's get connected! You can find me on:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .