@angular/core

afterNextRender

function

Developer preview

Register a callback to be invoked the next time the application finishes rendering, during the mixedReadWrite phase.

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

Register a callback to be invoked the next time the application finishes rendering, during the mixedReadWrite phase.

You should prefer specifying an explicit phase for the callback instead, or you risk significant performance degradation.

Note that the callback will run

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

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

          
            @Component({  selector: 'my-chart-cmp',  template: `<div #chart>{{ ... }}</div>`,})export class MyChartCmp {

AfterRenderRef

Register a callback to be invoked the next time the application finishes rendering, during the mixedReadWrite phase.

You should prefer specifying an explicit phase for the callback instead, or you risk significant performance degradation.

Note that the callback will run

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

@paramcallbackVoidFunction

A callback function to register

@paramoptionsAfterRenderOptions

Options to control the behavior of the callback

@returnsAfterRenderRef

Usage notes

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

          
            @Component({  selector: 'my-chart-cmp',  template: `<div #chart>{{ ... }}</div>`,})export class MyChartCmp {