docs: update references of afterEveryRender (#61159)

Since `afterRender` has been renamed `afterEveryRender`, some docs needed to be updated.

PR Close #61159
This commit is contained in:
cexbrayat 2025-05-07 09:48:33 +02:00 committed by Andrew Kushnir
parent 55a0621cbd
commit f06edf5fad
4 changed files with 14 additions and 14 deletions

View file

@ -72,7 +72,7 @@ process.
<td>Runs once the next time that <strong>all</strong> components have been rendered to the DOM.</td>
</tr>
<tr>
<td><code>afterRender</code></td>
<td><code>afterEveryRender</code></td>
<td>Runs every time <strong>all</strong> components have been rendered to the DOM.</td>
</tr>
<tr>
@ -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

View file

@ -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';

View file

@ -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

View file

@ -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.