@bravobit/ngx-autosize

ngx-autosize

Autosize your textareas with ease.

• 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 {
}