Angular - Adjust two way binded input element's height according to the length of its content

Question

I want to make the height of my input text adjusted to its text content. I can easily achieve that when the user is filling the content by triggering the (input) event, which calls my adjustHeight function which updates the height of the input element using the scrollHeight.

Code example below:

 <textarea #myLabel
       (input)="adjustHeight(myLabel)"
       [(ngModel)]="labelValue">
 </textarea>


 adjustHeight(element: HTMLElement) {
   element.style.height = "5px";
   element.style.height = (element.scrollHeight)+"px";
 }

This works fine when the user is filling the input element, but when the input text is rendered with an already filled labelValue, (coming from an API response) the height of the textarea is not changed dynamically since no (input) event gets triggered.

I tried to use (ngModelChange) event but it does not seem to be triggered. Is there any other event that could be binded to the input element to take care of its height on rendering? Thanks in advance

Artur Junior · Accepted Answer · 2022-01-03 18:38:57Z

1

template:

<textarea #myLabel
    [style.height]="getHeight(myLabel)" 
    [(ngModel)]="labelValue">
</textarea>

typescript:

public getHeight(element: HTMLElement): string {
    return element.scrollHeight + 'px';
}

this way, the style will change whenever necessary.

answered Jan 3, 2022 at 18:38

Artur Junior

1021 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juan Vicente Berzosa Tejero · Accepted Answer · 2022-01-03 17:15:40Z

0

Try starting by initializing labelValue to '' first (when you declare it), and then assign its value as you should be doing now.

answered Jan 3, 2022 at 17:15

Juan Vicente Berzosa Tejero

3,0422 gold badges8 silver badges16 bronze badges

1 Comment

NickAth Over a year ago

Thanks for your response, well the labelValue is a property of an object that is filled from the response of an API request like this.question = <api response> where question object contains the labelValue property so I think it does not matter whether the labelValue property is initialized to '' at first

Collectives™ on Stack Overflow

Angular - Adjust two way binded input element's height according to the length of its content

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related