ngx-autosize

esm
Directive that automatically adjusts textarea height to fit content
Version 2.0.4 License MIT
Keywords
ngng2angularangular2autosizetextareaelasticheight@angularionicionic4
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 1.8.7
- 1.8.6
- 1.8.5
- 1.8.4
- 1.8.3
- 1.8.0
- 1.7.5
- 1.7.4
- 1.7.3
- 1.7.2
- 1.6.4
- 1.6.3
- 1.6.2
- 1.6.0
- 1.5.1
- 1.5.0
- 1.4.1
- 1.4.0
- 1.3.3
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.4
- 1.2.3
- 1.2.2
- 1.2.0
- 1.1.3
- 1.1.2
- 1.1.1
- 1.0.0
- 2.0.0-next3
- 2.0.0-next2
- 2.0.0-next1
- 2.0.0-next
- 1.8.3-next
- 1.8.2-next
- 1.8.1-next
- 1.8.0-next
- 1.7.2-next
- 1.7.1-next
- 1.6.2-next
- 1.3.2-next
- 1.3.0-next
- 1.1.1-beta
- 1.1.0-beta
<script type="module"> import ngxAutosize from 'https://cdn.jsdelivr.net/npm/ngx-autosize@2.0.4/+esm' </script>
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.