function afterRender<E = never, W = never, M = never>(spec: { earlyRead?: (() => E) | undefined; write?: ((...args: [E] extends [never] ? [] : [E]) => W) | undefined; mixedReadWrite?: ((...args: [W] extends [never] ? [E] extends [...] ? [] : [...] : [...]) => M) | undefined; read?: ((...args: [...] extends [...] ? [...] extends [...] ? [...] extends [...] ? [] : [...] : [......, options?: Omit<AfterRenderOptions, "phase"> | undefined): AfterRenderRef;
Register callbacks to be invoked each time the application finishes rendering, during the specified phases. The available phases are:
earlyRead
Use this phase to read from the DOM before a subsequentwrite
callback, for example to perform custom layout that the browser doesn't natively support. Prefer theread
phase if reading can wait until after the write phase. Never write to the DOM in this phase.write
Use this phase to write to the DOM. Never read from the DOM in this phase.mixedReadWrite
Use this phase to read from and write to the DOM simultaneously. Never use this phase if it is possible to divide the work among the other phases instead.read
Use this phase to read from the DOM. Never write to the DOM in this phase.
You should prefer using the read
and write
phases over the earlyRead
and mixedReadWrite
phases when possible, to avoid performance degradation.
Note that:
- Callbacks run in the following phase order after each render:
earlyRead
write
mixedReadWrite
read
- Callbacks in the same phase run in the order they are registered.
- Callbacks run on browser platforms only, they will not run on the server.
The first phase callback to run as part of this spec will receive no parameters. Each subsequent phase callback in this spec will receive the return value of the previously run phase callback as a parameter. This can be used to coordinate work across multiple phases.
Angular is unable to verify or enforce that phases are used correctly, and instead relies on each developer to follow the guidelines documented for each value and carefully choose the appropriate one, refactoring their code if necessary. By doing so, Angular is better able to minimize the performance degradation associated with manual DOM access, ensuring the best experience for the end users of your application or library.
Components are not guaranteed to be hydrated before the callback runs. You must use caution when directly reading or writing the DOM and layout.
{ earlyRead?: (() => E) | undefined; write?: ((...args: [E] extends [never] ? [] : [E]) => W) | undefined; mixedReadWrite?: ((...args: [W] extends [never] ? [E] extends [...] ? [] : [...] : [...]) => M) | undefined; read?: ((...args: [...] extends [...] ? [...] extends [...] ? [...] extends [...] ? [] : [...] : [......
The callback functions to register
Omit<AfterRenderOptions, "phase"> | undefined
Options to control the behavior of the callback
AfterRenderRef
function afterRender(callback: VoidFunction, options?: AfterRenderOptions | undefined): AfterRenderRef;
Register a callback to be invoked each time the application finishes rendering, during the
mixedReadWrite
phase.
You should prefer specifying an explicit phase for the callback instead, or you risk significant performance degradation.
Note that the callback will run
- in the order it was registered
- once per render
- on browser platforms only
- during the
mixedReadWrite
phase
Components are not guaranteed to be hydrated before the callback runs. You must use caution when directly reading or writing the DOM and layout.
VoidFunction
A callback function to register
AfterRenderRef