ResizeTextArea в угловых 5

Question

Я новичок в Angular.Я хочу сделать textarea автоматически изменяемым, как в этом случае https://www.primefaces.org/primeng/#/inputtextarea. Я пробовал разные подходы, но ничего не работает на Angular 5.

Этот код показывает мою первоначальную версию 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>

Буду признателен за вашу помощь, спасибо.

Answer 1

Наконец-то я получил решение

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

В 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> 

Answer 2

Вам может не потребоваться написать собственную директиву или обработчик события.Вы можете использовать cdkTextareaAutosize из официального Angular CDK.

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

Answer 3

//install angular-autosize module

npm install angular-autosize

// Импортировать и объявить директиву в вашем главном модуле приложения:

import { AutosizeDirective } from 'angular-autosize';

@NgModule({
  declarations: [
    AutosizeDirective
  ]
})

Use the directive inside a textarea element in HTML:

<textarea autosize>Autosized textarea for Angular 2 and above</textarea>

Optionally, specify minRows and maxRows boundaries

<textarea autosize autosizeMinRows="5" autosizeMaxRows="10">Autosized textarea that expands from 5 to 10 rows</textarea>

Вы можете проверить это stakbitz

https://stackblitz.com/edit/angular-ameff4?file=src%2Fapp%2Fapp.component.html