`afterNextRender()`

Runs a callback once after the next render, browser-only.

Since Angular 16+ Spec ↗

Syntax

afterNextRender(callback, options?): AfterRenderRef

Parameters

Name	Type	Required	Description
`callback`	`() => void`	No	Function executed after the next DOM render.
`options`	`object`	No	Optional phase and injector.

Returns

AfterRenderRef — Handle with destroy() to cancel.

Examples

import { Component, afterNextRender, ElementRef, inject } from '@angular/core';

@Component({
  selector: 'app-x',
  standalone: true,
  template: `<canvas></canvas>`,
})
export class XComponent {
  private host = inject(ElementRef);
  constructor() {
    afterNextRender(() => {
      const canvas = this.host.nativeElement.querySelector('canvas');
      canvas.getContext('2d');
    });
  }
}

Notes

Runs only in the browser (never during server-side rendering), making it safe for direct DOM measurement or third-party libraries. Use afterRender to run after every render instead of just the next one. Must be in an injection context.