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

See more...

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});
  }
}