Angular/Ionic 2 directive to auto expand textareas according to their contents.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
CHANGELOG.md
LICENSE
README.md
package.json
tsconfig.json

README.md

Seeking Maintainer

Unfortunately I no longer have enough time to dedicate to this library. Please let me know in this issue if you are interested in taking over this project.


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

  1. Import the ElasticModule.
  2. Add the directive fz-elastic to your textarea or ion-textarea.
  3. 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.

  1. Import the module as above.
  2. Use the directive on an ion-textarea instead:
<ion-textarea fz-elastic></ion-textarea>

License

MIT

Credits

Heavily inspired by the following: