Currently the following code is being used to resize the textarea
function autoResize(el){
while (el.scrollHeight > el.offsetHeight){
el.rows += 1;
}
}
but it only resizes when I hover over the textarea
<textarea onmousemove="autoResize(this)"></textarea>
I would like to make it resize automatically when I open the screen that has the textarea. I already tried switching to onload but without success
export class TextAreaComponent extends OnInit {
@ViewChild('textarea', { read: ElementRef,static:true }) textarea: ElementRef;
@Input() value:string;
rowCount: number;
ngOnInit(): void {
this._autoResize(this.textarea.nativeElement);
}
onKeyup(el) {
this._autoResize(el);
}
private _autoResize(el) {
while (el.scrollHeight > el.offsetHeight){
el.rows += 1;
}
}
}
and template of textarea component might be look like this
<textarea
#textarea
[value]="!value ? '' : value"
(keyup)="onKeyup(textarea)"
></textarea>
I have created some sample code for you. https://stackblitz.com/edit/angular-ivy-kxszjh?file=src%2Fapp%2Fapp.component.ts