Hydration-Safe DOM Interactions with afterNextRender

Snippet

Hydration-Safe DOM Interactions with afterNextRender

In Angular applications with SSR and Hydration enabled, direct DOM access must be deferred until the client-side stabilization. The `afterNextRender` hook ensures code only runs on the browser, preventing mismatch errors and ensuring that `viewChild` elements are fully instantiated before use.

snippet.js
javascript
import { Component, ElementRef, viewChild, afterNextRender } from '@angular/core';
 
@Component({
  standalone: true,
  template: `<canvas #graphCanvas></canvas>`
})
export class ChartComponent {
  canvas = viewChild<ElementRef<HTMLCanvasElement>>('graphCanvas');
 
  constructor() {
    afterNextRender(() => {
      const ctx = this.canvas()?.nativeElement.getContext('2d');
      if (ctx) this.renderComplexVisualization(ctx);
    });
  }
 
  private renderComplexVisualization(ctx: CanvasRenderingContext2D) {
    // Client-side only rendering logic involving the DOM
  }
}

angular

Breakdown

afterNextRender(() => {

Registers a callback to be executed once the entire application has been rendered on the client.

const ctx = this.canvas()?.nativeElement.getContext('2d');

Safely accesses the native element of a signal-based viewChild after hydration stabilization.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Hydration-Safe DOM Interactions with afterNextRender

Related