ngx-autosize

ngx-autosize is an Angular2+ directive that automatically adjusts textarea height to fit its content.

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

• Production builds ready (AOT support)
• Works with Ionic (shadow dom of v4 too)

Check the demo here

Installation:

angular 12+

npm install ngx-autosize

for angular <12

npm install ngx-autosize@1

Use Example:

Add the declaration to your @NgModule:
IMPORTANT !!! you need to do it for every module that will be autosizing textareas ;)

import {AutosizeModule} from 'ngx-autosize';

...

@NgModule({
  imports: [
    AutosizeModule
  ]
})

Use directly inside your HTML templates

<textarea autosize class="my-textarea">
    Hello, this is an example of Autosize in Angular2.
</textarea>

<ion-textarea autosize [(ngModel)]="text">
    And this is Ionic2 example
</ion-textarea>

Dynamically enable directive

<textarea [autosize]="true"></textarea> // Enabled (defalut)
<textarea [autosize]="false"></textarea> // Disabled

Settings

Name | Default | Type | Description --- | --- | --- | --- minRows | | integer | Sets minimal amount of rows of the textarea maxRows | | integer | Sets maximum rows count after which autosizing if turned off and scrollbar appears onlyGrow | false | boolean | Controls if autosize should make the textarea smaller. In other words... should empty lines be trimmed? useImportant | false | boolean | Controls 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>

Events / Outputs

Name | Description --- | --- resized | Called whenever textarea has changes its size. New height as a param.

Example

<textarea autosize (resized)="onResized($event)">
    You need to implement 'onResized' yourself
</textarea>

Origins

This small lib is based on great http://stevepapa.com/angular2-autosize which is unfortunatelly not maintained and abandoned :(

Authors

Steve Papa Chrystian Ruminowicz

Licence

This project is licensed under the MIT license. See the LICENSE file for more info.