ng-elastic
Automatically grows and shrinks textareas based on their content. Supports both regular Angular 2+ <textarea>
and Ionic 2+ <ion-textarea>
controls.
Important Note: this module supports Angular / Ionic versions 2 and above only. For Angular 1.x / Ionic 1.x, please see the excellent angular-elastic library, which this module was inspired by.
Installation
npm install ng-elastic
Quick Start
- Import the
ElasticModule
. - Add the directive
fz-elastic
to yourtextarea
orion-textarea
. - Watch as your textareas automatically grow and shrink depending on their content.
Usage
Angular 2+
See the sample repo for a full reference example.
1. Import the ElasticModule
:
;;;;;
2. Use the directive in your component HTML:
;;
That's it! Your textarea will now grow and shrink as you type.
The textarea will also respond to changes from any one or two way bindings that are setup, e.g. with [(ngModel)]
.
3. Output events
A single output event is currently supported, (on-resize)
:
This will be fired when the textarea is resized, and will be passed a single argument: a number representing the new height, in pixels.
Ionic 2/3
See the sample repo for a full reference example.
- Import the module as above.
- Use the directive on an
ion-textarea
instead:
License
MIT
Credits
Heavily inspired by the following: