Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

afterNextRender

Register a callback to be invoked the next time the application finishes rendering.

See more...

      
      afterNextRender(callback: VoidFunction, options?: AfterRenderOptions): AfterRenderRef
    
Parameters
callback VoidFunction

A callback function to register

options AfterRenderOptions

Optional. Default is undefined.

Returns

AfterRenderRef

Description

You should always explicitly specify a non-default phase, or you risk significant performance degradation.

Note that the callback will run

  • in the order it was registered
  • on browser platforms only

Components are not guaranteed to be hydrated before the callback runs. You must use caution when directly reading or writing the DOM and layout.

Further information is available in the Usage Notes...

Usage notes

Use afterNextRender to read or write the DOM once, for example to initialize a non-Angular library.

Example

      
      @Component({
  selector: 'my-chart-cmp',
  template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
  @ViewChild('chart') chartRef: ElementRef;
  chart: MyChart|null;

  constructor() {
    afterNextRender(() => {
      this.chart = new MyChart(this.chartRef.nativeElement);
    }, {phase: AfterRenderPhase.Write});
  }
}