Angular Autosize TextArea Height Directive


Angular Autosize TextArea

Settings

NameDefaultTypeDescription
minRowsintegerSets minimal amount of rows of the textarea
maxRowsintegerSets maximum rows count after which autosizing if turned off and scrollbar appears
onlyGrowfalsebooleanControls if autosize should make the textarea smaller. In other words… should empty lines be trimmed?
useImportantfalsebooleanControls if autosize should include !important in its height css styles. Should only need to be used if the height of the textarea is being overridden elsewhere

Example

<textarea autosize [minRows]="5" [maxRows]="10">
    Hello, this is an example of Autosize in Angular2.
</textarea>

ng-autosize

ng-autosize is an Angular2, Angular4 + directive that automatically adjusts textarea height to fit content.

It adjusts the textarea height automatically to any text input, or changes to the model bound to the textarea.

Installation:

npm install ng-autosize

Use Example:

Add the declaration to your @NgModule:

import {Autosize} from 'ng-autosize';

...

@NgModule({
  declarations: [
    Autosize
  ]
})

Use directly inside your HTML templates by adding the word ‘autosize’ to any textarea.

<textarea autosize>Hello, this is an example of Autosize in Angular2.</textarea>

Extra Configuration Options:

Set a minimum height on your textarea.

<textarea autosize [minHeight]="60">Hello, this is an example of Autosize in Angular2 with a Min Height.</textarea>

Set a maximum height on your textarea.

<textarea autosize [maxHeight]="120">Hello, this is an example of Autosize in Angular2 with a Max Height.</textarea>

Origins

This small lib is based on great  which is unfortunatelly not maintained and abandoned 🙁

For more Angular query plugins Click

Leave a Reply

Your email address will not be published. Required fields are marked *