Angular - Textarea auto height does not automatically resize on text deletion

Question

I am using the following directive to allow an auto-sizing to a text area depending on user input:

import { ElementRef, HostListener, Directive, OnInit } from '@angular/core';

@Directive({
  selector: 'ion-textarea[autosize]'
})

export class Autosize implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(public element:ElementRef) {
  }

  ngOnInit():void {
    setTimeout(() => this.adjust(), 0);
  }

  adjust():void {
    const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
      textArea.style.height = 'auto';
      textArea.style.height = textArea.scrollHeight + "px";
      textArea.style.maxHeight = '100px';
  }
}

It is working as intended, however when the text inside that textarea is manually deleted, the textarea will not resize automatically.

E.g. if the [(ngModel)] variable assigned to that textarea is assigned a different string, or empty string, the height of the text area will not automatically resize. The user needs to start typing again in order to make the textarea resize accordingly.

What could be a good solution to solving this issue?

Bainmarie

Answer 1

You may not need to write your own directive. You can use cdkTextareaAutosize from the official Angular CDK.

https://material.angular.io/components/input/overview#auto-resizing-code-lt-textarea-gt-code-elements

Bespatter

This is the best way – Farver

This should be the accepted answer, no need to reinvent the wheel. – Lubbi

Answer 2

I'm using this simple approach, and textarea does shrink when text is deleted :

<textarea (keyup)="autoGrowTextZone($event)"></textarea>

and

autoGrowTextZone(e) {
  e.target.style.height = "0px";
  e.target.style.height = (e.target.scrollHeight + 25)+"px";
}

Woodsman

Answer 3

try adding something like this:

ngAfterContentChecked(): void {
    this.adjust();
}

or just use this lib: ngx-autosize :)

UPDATE
The solution with ngAfterContentChecked hook is still valid but it might affect app speed if used too often...

another way is to treat ngModel as input and that will let you rely on ngOnChanges hook, so in your directive try adding:

...
@Input('ngModel') text: any;
...
ngOnChanges(changes) {
    if (changes.text) {
        this.adjust();
    }
}

Eboat

After trying many different methods of achieving this, I found that just using ngx-autosize was the most seamless solution. Thanks! – Bullet

Answer 4

You dont need find textArea, using :

this.element.nativeElement.style.height = 'auto';
this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + 'px';
this.element.nativeElement.style.maxHeight = '100px';

Orang