From f06edf5fad64f3e5eebb5070eb2649949da4c82e Mon Sep 17 00:00:00 2001 From: cexbrayat Date: Wed, 7 May 2025 09:48:33 +0200 Subject: [PATCH] docs: update references of afterEveryRender (#61159) Since `afterRender` has been renamed `afterEveryRender`, some docs needed to be updated. PR Close #61159 --- adev/src/content/guide/components/lifecycle.md | 16 ++++++++-------- adev/src/content/guide/ssr.md | 2 +- adev/src/content/guide/zoneless.md | 2 +- adev/src/content/reference/errors/NG0602.md | 8 ++++---- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/adev/src/content/guide/components/lifecycle.md b/adev/src/content/guide/components/lifecycle.md index 63c0c56d932..7222eebf3c4 100644 --- a/adev/src/content/guide/components/lifecycle.md +++ b/adev/src/content/guide/components/lifecycle.md @@ -72,7 +72,7 @@ process. Runs once the next time that all components have been rendered to the DOM. - afterRender + afterEveryRender Runs every time all components have been rendered to the DOM. @@ -219,16 +219,16 @@ here, attempting to change any state in this method results in an [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100). -### afterRender and afterNextRender +### afterEveryRender and afterNextRender -The `afterRender` and `afterNextRender` functions let you register a **render callback** to be +The `afterEveryRender` and `afterNextRender` functions let you register a **render callback** to be invoked after Angular has finished rendering _all components_ on the page into the DOM. These functions are different from the other lifecycle hooks described in this guide. Rather than a class method, they are standalone functions that accept a callback. The execution of render callbacks are not tied to any specific component instance, but instead an application-wide hook. -`afterRender` and `afterNextRender` must be called in +`afterEveryRender` and `afterNextRender` must be called in an [injection context](guide/di/dependency-injection-context), typically a component's constructor. @@ -237,9 +237,9 @@ See [Using DOM APIs](guide/components/dom-apis) for guidance on working with the Render callbacks do not run during server-side rendering or during build-time pre-rendering. -#### afterRender phases +#### after*Render phases -When using `afterRender` or `afterNextRender`, you can optionally split the work into phases. The +When using `afterEveryRender` or `afterNextRender`, you can optionally split the work into phases. The phase gives you control over the sequencing of DOM operations, letting you sequence _write_ operations before _read_ operations in order to minimize [layout thrashing](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing). In order to @@ -327,7 +327,7 @@ ngDoCheck-->ngAfterViewInit ngAfterContentInit-->ngAfterContentChecked ngAfterViewInit-->ngAfterViewChecked end -CHANGE--Rendering-->afterRender +CHANGE--Rendering-->afterNextRender-->afterEveryRender ``` ### Subsequent updates @@ -340,7 +340,7 @@ ngOnChanges-->ngDoCheck ngDoCheck-->ngAfterContentChecked; ngDoCheck-->ngAfterViewChecked end -CHANGE--Rendering-->afterRender +CHANGE--Rendering-->afterEveryRender ``` ### Ordering with directives diff --git a/adev/src/content/guide/ssr.md b/adev/src/content/guide/ssr.md index cc6f766240c..2f6d897524c 100644 --- a/adev/src/content/guide/ssr.md +++ b/adev/src/content/guide/ssr.md @@ -367,7 +367,7 @@ bootstrapApplication(AppComponent, { Some common browser APIs and capabilities might not be available on the server. Applications cannot make use of browser-specific global objects like `window`, `document`, `navigator`, or `location` as well as certain properties of `HTMLElement`. -In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the [`afterRender`](api/core/afterRender) and [`afterNextRender`](api/core/afterNextRender) lifecycle hooks. These are only executed on the browser and skipped on the server. +In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the [`afterEveryRender`](api/core/afterEveryRender) and [`afterNextRender`](api/core/afterNextRender) lifecycle hooks. These are only executed on the browser and skipped on the server. ```angular-ts import { Component, ViewChild, afterNextRender } from '@angular/core'; diff --git a/adev/src/content/guide/zoneless.md b/adev/src/content/guide/zoneless.md index 3d2387705bb..5cf090ce83a 100644 --- a/adev/src/content/guide/zoneless.md +++ b/adev/src/content/guide/zoneless.md @@ -69,7 +69,7 @@ Similarly, `NgZone.isStable` will always be `true` and should not be used as a c The `NgZone.onMicrotaskEmpty` and `NgZone.onStable` observables are most often used to wait for Angular to complete change detection before performing a task. Instead, these can be replaced by `afterNextRender` -if they need to wait for a single change detection or `afterRender` if there is some condition that might span +if they need to wait for a single change detection or `afterEveryRender` if there is some condition that might span several change detection rounds. In other cases, these observables were used because they happened to be familiar and have similar timing to what was needed. More straightforward or direct DOM APIs can be used instead, such as `MutationObserver` when code needs to wait for certain DOM state (rather than waiting for it indirectly diff --git a/adev/src/content/reference/errors/NG0602.md b/adev/src/content/reference/errors/NG0602.md index 38a92d47c3c..09e5bf120a8 100644 --- a/adev/src/content/reference/errors/NG0602.md +++ b/adev/src/content/reference/errors/NG0602.md @@ -7,10 +7,10 @@ Avoid calling functions like `effect` as part of template expressions, as those Computed expressions are expected to be pure. Pure means that expression do not trigger any side effects. -Side effects are operations like scheduling `afterRender`, creating a new `effect`, or subscribing to observables. +Side effects are operations like scheduling `afterNextRender`/`afterEveryRender`, creating a new `effect`, or subscribing to observables. Some operations are explicitly banned inside reactive contexts in order to avoid common pitfalls. -As an example, using `afterRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates. +As an example, using `afterNextRender`/`afterEveryRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates. This is likely not intended and could degrade application performance. ### Fixing the error @@ -18,8 +18,8 @@ This is likely not intended and could degrade application performance. This error guide is non-exhaustive. It captures a few common scenarios and how to address the error. -#### `afterRender` -Move the call for `afterRender` outside of the reactive context. +#### `afterNextRender`/`afterEveryRender` +Move the call for `afterNextRender`/`afterEveryRender` outside of the reactive context. A good place to schedule the after render hook is in the component's class constructor. Alternatively, use `untracked` to leave the reactive context and explicitly opt-out of this error.