liveBook · Manning

afterRender

As explained in Modern Angular

afterRender is an Angular function that registers a callback to run on the client after each application render.

afterRender registers a callback that runs only in the browser after server-side rendering and after each application render. It prevents browser-only APIs such as window and document from executing during SSR. section 9.2.3

Use afterRender when:

  • DOM updates must occur after component state changes, including manual updates in structural directives. section 9.2.3
  • Browser APIs would otherwise fail during SSR with errors such as window is not defined. section 9.2.3
  • A callback should run once instead; choose afterNextRender for one-time client initialization such as registering an event listener. section 9.2.3

SSR-safe DOM work

A scroll-to-top component can register browser-dependent behavior inside a render callback, keeping window access on the client. Use afterRender for repeated DOM reactions; use afterNextRender when the listener only needs registration once.

How Modern Angular covers it

How deep it goes
Explains callback timing, SSR behavior, one-time alternatives, dependency injection, and render phases without detailing Angular internals.
Examples
Uses a scroll-to-top component, window scroll events, manual change detection, and configurable DOM read-write phases.
What it assumes
Assumes familiarity with Angular components, lifecycle methods, SSR, browser APIs, and DOM access.
What you can do after
Apply afterRender to schedule SSR-safe DOM updates and select render phases for better performance.
How it connects
Connects server-side rendering, browser APIs, afterNextRender, DOM manipulation, dependency injection, and change detection.
Cover of Modern Angular
liveBookmanning.com
Read Modern Angular on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Modern Angular. The section links point to the parts of the book it draws on.