Angular afterRender & afterNextRender NEW phases API

Angular provides powerful lifecycle hooks for component interaction, but sometimes you need to work directly with the DOM after rendering. This is where afterRender and afterNextRender come in handy.

Understanding the Need

Imagine you want to integrate a third-party charting library that relies on DOM elements for visualization. Standard lifecycle hooks might not be ideal for this scenario, as the library might require the DOM to be fully in place before initialization. This is where afterRender and afterNextRender provide a solution.

Key Differences

While both hooks deal with post-rendering tasks, there's a crucial distinction:

• afterRender: allows you to register a callback that executes after every render cycle.

• afterNextRender: registers a callback that executes ONLY ONCE after the next render cycle, when the DOM is loaded.

Choosing the Right Hook

• Use afterNextRender for one-time DOM manipulations like initializing third-party libraries or setting up element observers.

• Use afterRender for scenarios where you need to react to frequent DOM changes, like dynamically adjusting element sizes based on content.

Remember: frequent use of afterRender can impact performance, so use it judiciously. And they both must be used inside an injection context. These hooks don’t work on SSR or pre-rendering.

Order of Phases

Angular defines distinct phases for controlled DOM access during rendering:

1. EarlyRead: allows reading data from the DOM before subsequent write operations.

2. Write: allows writing data to the DOM (avoid reading during this phase).

3. MixedReadWrite: permits both reading and writing, but use it cautiously due to potential performance drawbacks.

4. Read: allows reading data from the DOM (avoid writing during this phase).

Callback Execution Order ➡️

Callbacks within the same phase execute in the order they are registered.

Callbacks run after each render cycle, following this specific phase order:

1. earlyRead

2. write

3. mixedReadWrite

4. read

During initialization (from angular.dev)

Subsequent updates (from angular.dev)

Parameter Passing Between Phases

The first phase callback (earlyRead) receives no parameters.

Each subsequent phase callback receives the return value of the previously run phase callback as a parameter. This enables coordination of work across multiple phases.

Profitable Examples

Here are some practical use cases for these hooks:

1. Initializing Third-Party Libraries: use afterNextRender to ensure the DOM is ready before initializing libraries like Chart.js.

2. Setting Up Element Observers: utilize afterNextRender to set up IntersectionObserver or ResizeObserver, as these APIs rely on the element's presence in the DOM.

3. Dynamic Content Sizing: implement afterRender with the Read phase to adjust element dimensions based on dynamically loaded content.

4. Detaching Temporary Elements : use afterNextRender to remove temporary elements you added during the rendering process (like cleaning up after a modal is closed ❌).

Important Considerations ⚠️

• afterRender and afterNextRender are for browser-specific operations and won't work during server-side rendering.

• Consider using built-in Angular functionalities like ngAfterViewInit for component initialization tasks whenever possible.

• While afterRender allows reading the DOM, be cautious due to potential hydration mismatches between server and client rendering.

• They can only be declared in injection context.

By understanding these concepts, you can leverage afterRender and afterNextRender effectively to create a seamless interaction between your Angular applications and the DOM.

Custom Inject Function

You can encapsulate OnInit login into a custom inject function. Thank you Chau Tran for this.

You can play with this code that is explained in this video:

Thanks for reading so far 🙏

I’d like to have your feedback so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you really liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁