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?
It looks like the problem was with Angular (9.1.2) after updating Angular it seems to work.