Angular 9 - Expand the height of the text box when the user inputs something and gets back to normal size when clicking out of it

Question

I have the following requirement where an input fields height should adjust to show whatever the user has entered and then it goes back to the normal size once he clicks out. Something like this-

When the user enters the request it has to expand (second request entry) and when he clicks out of the box it has to go back to normal (first request entry). Something like how "POSTMAN" app does when you enter any header or query parameters.

score 0 · Answer 1 · answered Apr 27 '20 at 11:02

from this SO answer

You can has a variable 'heigth' and a function that receiver the textArea:

heigth = "1.125rem";

changeHeigth(textArea) {
    this.heigth = null;
    setTimeout(() => {
      this.heigth = textArea.scrollHeight + "px";
    });
  }

To "auto size" it's necesary first put the heigth to null, and after, in a next step equal to scrollHeigth. This is the reason to use setTimeout

So, you control the height in (focus) (blur) and (input)

<textarea #textArea  [style.height]="heigth" 
                       (input)="changeHeigth(textArea)" 
                       (focus)="heigth=textArea.scrollHeight+'px'" 
                       (blur)="heigth='1.125rem'"></textarea>

see a simple example in stackblitz

Angular 9 - Expand the height of the text box when the user inputs something and gets back to normal size when clicking out of it

1 Answers1