One issue I'm facing is with a directive that sets the height of a textarea dynamically based on its content:
@Directive({
selector: '[fluidHeight]',
host: {
'(ngModelChange)': 'setHeight()'
}
})
export class FluidHeightDirective implements AfterViewInit {
constructor(private elementRef: ElementRef) {}
ngAfterViewInit() {
this.setHeight();
}
@HostBinding('style.height.px')
height: number;
setHeight() {
console.log(true)
this.height = this.elementRef.nativeElement.scrollHeight;
}
}
However, when combining [ngModel] with readonly, I encounter problems:
<textarea [ngModel]="foo" fluidHeight readonly></textarea>
Another textarea modifies the content in the read-only input field.
I've attempted to use ngModelChange, change, and input, but none seem to resolve the issue.
If anyone has a solution for this, please share!