It's a special angular directive that autoresize a textarea based on the content. Autoresize is triggered on:

  • textarea content change
  • model change
  • window resize

Get started

  • Live demo

  • NPM

  • Try it yourself:

    • Run npm install
    • Run npm run start for a dev server
    • Navigate to http://localhost:4200/

How to use it

Install the package

Run npm i @danielzotti/ng-textarea-autoresize --save

Import the module

Import NgTextareaAutoresizeModule from @danielzotti/ng-textarea-autoresize in app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { NgTextareaAutoresizeModule } from "@danielzotti/ng-textarea-autoresize";

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

  declarations: [AppComponent],
  imports: [BrowserModule, NgFilemanagerModule],
  providers: [],
  bootstrap: [AppComponent]
export class AppModule {}

Use it in a component

Basic template

  • Easy to use
<textarea autoresize></textarea>

Max height

  • Set max height in pixels on autoresizeMaxHeight attribute
<textarea autoresize autoresizeMaxHeight="150"></textarea>

Bind to model

  • Bind textarea content to a variable on autoresize attribute
  • Bind textarea max height to a variable on autoresizeMaxHeight attribute
<textarea [autoresize]="text" [autoresizeMaxHeight]="maxHeight"></textarea>
import { Component } from "@angular/core";

  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
export class AppComponent {
  maxHeight = 150; // pixels
  text = "This is the text for the textarea!";