What should I use instead of @HostBinding("@grow") in Angular 9?

Question

I have this directive that I use to animate changes in height of components. But since we updated from Angular 8 to 9 it almost looks like the hostPropertyName @grow is no longer supported. This is the directive:

import {
  Directive,
  OnChanges,
  Input,
  ElementRef,
  HostBinding
} from "@angular/core";

@Directive({
  selector: "[smoothHeight]",
  host: { "[style.display]": '"block"' }
})
export class SmoothHeightDirective implements OnChanges {
  @Input()
  smoothHeight;
  pulse: boolean;
  startHeight: number;

  constructor(private element: ElementRef) {}

  @HostBinding("@grow")
  get grow() {
    return { value: this.pulse, params: { startHeight: this.startHeight } };
  }

  setStartHeight() {
    this.startHeight = this.element.nativeElement.clientHeight;
  }

  ngOnChanges() {
    this.setStartHeight();
    this.pulse = !this.pulse;
  }
}

Chrome throws the following error:

core.js:6185 ERROR TypeError: Cannot read property '11' of null

Safari comes up with this:

TypeError: null is not an object (evaluating 'componentLView[RENDERER]')

And Firefox:

ERROR TypeError: "componentLView is null"

Any suggestions on what I am doing wrong, and how to fix it?

Answer 1

It looks like the problem was with Angular (9.1.2) after updating Angular it seems to work.