GeezerVison

function afterNextRender<E = never, W = never, M = never>(
  spec: {
    earlyRead?: (() => E) | undefined;
    write?: ((...args: [E] extends [never] ? [] : [E]) => W) | undefined;
    mixedReadWrite?:
      | ((
          ...args: [W] extends [never] ? ([E] extends [never] ? [] : [E]) : [W]
        ) => M)
      | undefined;
    read?:
      | ((
          ...args: [M] extends [never]
            ? [W] extends [never]
              ? [E] extends [never]
                ? []
                : [E]
              : [W]
            : [M]
        ) => void)
      | undefined;
  },
  options?: AfterRenderOptions | undefined,
): AfterRenderRef;
function afterNextRender(
  callback: VoidFunction,
  options?: AfterRenderOptions | undefined,
): AfterRenderRef;

Register callbacks to be invoked the next time the application finishes rendering, during the specified phases. The available phases are:

• earlyRead Use this phase to read from the DOM before a subsequent write callback, for example to perform custom layout that the browser doesn't natively support. Prefer the read phase if reading can wait until after the write phase. Never write to the DOM in this phase.
• write Use this phase to write to the DOM. Never read from the DOM in this phase.
• mixedReadWrite Use this phase to read from and write to the DOM simultaneously. Never use this phase if it is possible to divide the work among the other phases instead.
• read Use this phase to read from the DOM. Never write to the DOM in this phase.

Note that:

• Callbacks run in the following phase order once, after the next render:
  1. earlyRead
  2. write
  3. mixedReadWrite
  4. read
• Callbacks in the same phase run in the order they are registered.
• Callbacks run on browser platforms only, they will not run on the server.

The first phase callback to run as part of this spec will receive no parameters. Each subsequent phase callback in this spec will receive the return value of the previously run phase callback as a parameter. This can be used to coordinate work across multiple phases.

Angular is unable to verify or enforce that phases are used correctly, and instead relies on each developer to follow the guidelines documented for each value and carefully choose the appropriate one, refactoring their code if necessary. By doing so, Angular is better able to minimize the performance degradation associated with manual DOM access, ensuring the best experience for the end users of your application or library.

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 {
  chartRef = viewChild.required<ElementRef>('chart');
  chart: MyChart|null;

  constructor() {
    afterNextRender({
      write: () => {
        this.chart = new MyChart(this.chartRef().nativeElement);
      }
    });
  }
}