CODEWITHSUNDEEP
angulartypescripttextareaangular5autoresize
Roman Soviak
Roman Soviak

Reputation: 869

ResizeTextArea in angular 5

I'm new to Angular. I want to make textarea autoresizable, like in this case https://www.primefaces.org/primeng/#/inputtextarea. I tried different approaches, but nothing works on Angular 5.

This code shows my initial version of textarea.

<div class="form-group" contenteditable="true">
    <label for="description">Description</label>
    <textarea type="text" class="form-control" id="description" [(ngModel)]="dish.description" #description="ngModel" name="description" required></textarea>
    <div [hidden]="description.valid || description.pristine" class="alert alert-danger">Description can't be empty</div>
</div>

I'll appreciate your help, thanks.

Upvotes: 0

Views: 3738

Answers (2)

AsGoodAsItGets
AsGoodAsItGets

Reputation: 3171

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

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

Upvotes: 0

Roman Soviak
Roman Soviak

Reputation: 869

Finally I got solution

  autogrow() { 
    let textArea = document.getElementById("description") 
    textArea.style.overflow = 'hidden'; 
    textArea.style.height = 'auto'; 
    textArea.style.height = textArea.scrollHeight + 'px'; 
}

In HTML:

<textarea style="resize:vertical" (keyup)="autogrow()" rows="3" (click)="autogrow()" type="text" class="form-control" id="description" [(ngModel)]="myprivateObject.description" #description="ngModel" name="description" required></textarea>

Upvotes: 2

Related Questions