Skip to content
Angular2+ textarea autosize directive
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e chore(libs): Switching library structure and building flow to officia… Nov 19, 2018
projects/autosize chore(libs): updating dependencies May 14, 2019
src feat(demo): adding demo showcasting new top and bottom borders size s… Mar 30, 2019
.editorconfig fix(adjust): isolating changes that should trigger textarea adjusting… Nov 21, 2018
.gitignore chore(): updating ignores Nov 21, 2018
LICENSE chore(): adding missing LICENSE file Jan 28, 2019
README.md chore(docs): updating readme May 22, 2019
angular.json chore(libs): Switching library structure and building flow to officia… Nov 19, 2018
package-lock.json chore(libs): updating dependencies May 14, 2019
package.json chore(libs): updating dependencies May 14, 2019
tsconfig.json fix(adjust): isolating changes that should trigger textarea adjusting… Nov 21, 2018
tslint.json

README.md

npm version License: MIT

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:

npm install ngx-autosize

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>

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>

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.

You can’t perform that action at this time.