I have a component that changes size every now and then. When it gets destroyed, I need its current height for the :leave animation. The animation is bound to the component by @HostBinding().

ngOnDestroy() runs before the :leave animation starts, so that seems to be a good place to measure the current height:

private elementRef = inject(ElementRef);

@HostBinding(`@out`) out = {
  value: false,
  params: { height: 20 }, // just a random value
};

ngOnDestroy(): void {
  const height = this.elementRef.nativeElement.getBoundingClientRect().height;
  console.log(`Height in ngOnDestroy: `, height);
  this.out = {
    value: true,
    params: { height: height },
  };
}

The animation runs, so it must have got the value: true part in time. If I later (before destroying the component) change the params: {height: someNewValue} to anything, that works. But when I do it in ngOnDestroy(), the new height param doesn’t get applied. Seems like Angular Animations has a slight delay with params (I assume it makes a RegExp search for the {{height}} part in the trigger and maybe some other stuff, which takes time). Is there a way to force Angular to use the newest params value? Some way to force it to wait?

I made a Stackblitz to show what I mean. This is not what I want to do for real, but it shows the principe of the problem.