angular / angular

Deliver web apps with confidence 🚀
https://angular.dev
MIT License
94.71k stars 24.68k forks source link

feat(core): Redesign the afterRender & afterNextRender phases API #55648

Open mmalerba opened 2 weeks ago

mmalerba commented 2 weeks ago

Previously afterRender and afterNextRender allowed the user to pass a phase to run the callback in as part of the AfterRenderOptions. This worked, but made it cumbersome to coordinate work between phases.

let size: DOMRect|null = null;

afterRender(() => {
  size = nativeEl.getBoundingClientRect();
}, {phase: AfterRenderPhase.EarlyRead});

afterRender(() => {
  otherNativeEl.style.width = size!.width + 'px';
}, {phase: AfterRenderPhase.Write});

This PR replaces the old phases API with a new one that allows passing a callback per phase in a single afterRender / afterNextRender call. The return value of each phase's callback is passed to the next phase callback that was part of the same afterRender call.

afterRender({
  earlyRead: () => nativeEl.getBoundingClientRect(),
  write: (rect) => {
    otherNativeEl.style.width = rect.width + 'px';
  }
});

This API also retains the ability to pass a single callback, which will be run in the mixedReadWrite phase.

afterRender(() => {
  // read some stuff ...
  // write some stuff ...
});