@bravobit/ngx-autosize

A simple library that autosizes your textareas.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
30Oct 25, 2018Jun 25, 2018Minified + gzip package size for @bravobit/ngx-autosize in KB

Readme

ngx-autosize

Autosize your textareas with ease.

npm version npm license

  • Use command + F or ctrl + F to search for a keyword.
  • Contributions welcome, please see contribution guide.

Features

  • Easy implementation
  • Library can be consumed by Angular CLI, Webpack, or SystemJS
  • Compatibility
    • Angular Universal
    • Ahead-Of-Time compilation (AOT)
    • Lazy loading

Demo

Click here to play with the example

Installation

To use ngx-autosize in your project install it via npm or yarn:

$ npm install @bravobit/ngx-autosize --save

# or

$ yarn add @bravobit/ngx-autosize

Setup

Add the NgxAutosizeModule to your imports array in your AppModule.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxAutosizeModule} from '@bravobit/ngx-autosize';

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

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

Example

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

@Component({
    selector: 'app-root',
    template: `
        <textarea ngxAutosize
                  minHeight="100px"
                  maxHeight="500px">Woop die floop</textarea>
    `,
    styles: ['textarea { resize: none; }'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.