docs: Add docs about afterRenderEffect

[eneajaho]

Describe the problem that you experienced

Currently afterRenderEffect is visible in API References pages and there are no docs elsewhere about it on where we can use it (usecases) and why we should use that instead of a normal effect.

Enter the URL of the topic with the problem

No response

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

If the problem is browser-specific, please specify the device, OS, browser, and version

Provide any additional information here in as much as detail as you can

[VaradGupta23]

afterRenderEffect is a special type of effect that runs only after Angular has finished updating the DOM.
This is the main difference from a normal effect(), which can run during the change detection cycle, possibly before the DOM reflects the latest state.

Key Differences

effect() → reacts to signal changes immediately during the reactive cycle.

afterRenderEffect() → waits until Angular has committed the render, so you can safely read or interact with the DOM.

When to use afterRenderEffect

Use it when your reactive logic depends on the final rendered state, for example:

Measuring DOM elements after an update.

Integrating with 3rd-party libraries that require the DOM to be up to date.

Triggering animations or scroll behavior once the new content is visible.

Example
import { Component, signal, afterRenderEffect } from '@angular/core';

@component({
selector: 'app-demo',
template: <p #para>{{ count() }}</p> <button (click)="count.update(v => v + 1)">Increment</button>
})
export class DemoComponent {
count = signal(0);

constructor() {
// This runs after Angular updates the DOM with the latest count
afterRenderEffect(() => {
console.log('DOM updated: count =', this.count());
// Safe place to measure DOM or interact with external libraries
});
}
}

Rule of Thumb

Use effect() for business logic and state reactions.

Use afterRenderEffect() only when you need to run code that depends on the DOM being in sync with the state.

Adding this explanation (with examples) to the docs would make it clearer why and when to choose afterRenderEffect instead of a normal effect().