ng-autosize

ng-autosize is a modern Angular directive that automatically adjusts textarea height to fit content.

Features

• ✅ Standalone directive - No NgModule imports needed
• ✅ Angular 19+ support - Built with the latest Angular
• ✅ TypeScript strict mode - Type-safe and reliable
• ✅ Automatic height adjustment - Grows/shrinks with content
• ✅ Min/Max height support - Control textarea bounds
• ✅ SSR compatible - Works with server-side rendering
• ✅ Lightweight - Zero dependencies

Installation

npm install ng-autosize

Requirements

• Angular: 19.0.0 or higher
• TypeScript: 5.6.x

Usage

Standalone Component (Recommended)

Import the directive directly in your standalone component:

import { Component } from '@angular/core';
import { Autosize } from 'ng-autosize';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [Autosize],  // Import directive
  template: `
    <textarea autosize placeholder="Type here..."></textarea>
  `
})
export class ExampleComponent {}

With NgModule (Legacy)

If you're still using NgModules:

import { NgModule } from '@angular/core';
import { Autosize } from 'ng-autosize';

@NgModule({
  imports: [Autosize],  // Import as standalone
  // ...
})
export class AppModule {}

Configuration Options

Minimum Height

Set a minimum height for the textarea:

<textarea autosize [minHeight]="100">
  This textarea has a minimum height of 100px
</textarea>

Maximum Height

Set a maximum height for the textarea:

<textarea autosize [maxHeight]="300">
  This textarea has a maximum height of 300px
</textarea>

Both Min and Max

Combine both options:

<textarea
  autosize
  [minHeight]="100"
  [maxHeight]="500"
  placeholder="Constrained between 100px and 500px">
</textarea>

Migration from v1.x

ng-autosize v2.0 introduces breaking changes for Angular 19 compatibility.

Breaking Changes

1. Minimum Angular version: Now requires Angular 19+
2. Standalone-first: No longer exports an NgModule
3. TypeScript: Requires TypeScript 5.6.x

Migration Steps

Before (v1.x):

import { Autosize } from 'ng-autosize';

@NgModule({
  declarations: [Autosize]  // Old way
})

After (v2.x):

import { Autosize } from 'ng-autosize';

@Component({
  standalone: true,
  imports: [Autosize]  // New way
})

How It Works

The directive:

1. Listens to input events on the textarea
2. Temporarily sets height to auto to measure scroll height
3. Adjusts the textarea height to match content
4. Respects min/max height constraints
5. Handles window resize events intelligently

Browser Support

Supports all modern browsers:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

Demo

Live Demo

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

stevepapa

License

This project is licensed under the MIT License - see the LICENSE file for details.