ng-elastic

ng-elastic

Automatically grows and shrinks textareas based on their content. Supports both regular Angular 2+ <textarea> and Ionic 2+ <ion-textarea> controls.

See the demo here.

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 your textarea or ion-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:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { ElasticModule } from 'ng-elastic';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ElasticModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

2. Use the directive in your component HTML:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<textarea fz-elastic></textarea>`
})
export class AppComponent {};

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):

<textarea (on-resize)="myCustomFunc()"></textarea>

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:

<ion-textarea fz-elastic></ion-textarea>

License

MIT

Credits

Heavily inspired by the following:

• angular-elastic
• angular2-autosize
• This Ionic community thread