I am working on angular2 applciation. i have a requirement to autosize textarea. I am trying to reuse the angular2-autosize from

Followed the readme, But I am getting the below error

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Vipin\SampleApp\node_modules\angular2-autosize\angular2-autosize.js'.

Please suggest how to overcome this issue.

10 Answers

The requested behaviour is already implemented in angular material as documented here: Angular Material Input Autosize. This is especially useful if you are using angular material anyways.

Just use cdkTextareaAutosize as in the example:

<textarea cdkTextareaAutosize></textarea> 

Update (15.04.2018) Managed to package it, now its available as

npm install ngx-autosize 

Old answer:

I had the same problem today and got it fixed! Please check my fork:

Until PR is merged try:

npm install --save 

And then in your code, because it's slightly different, you just import module not directive...

so instead of:

import {Autosize} from 'angular2-autosize'; @NgModule({ ... declarations: [ Autosize ] ... }) 

you should have:

import {AutosizeModule} from 'angular2-autosize'; @NgModule({ ... imports: [ AutosizeModule ] ... }) 

you can do like this without using the package. its simple

in controller like below

autogrow(){ let textArea = document.getElementById("textarea") textArea.style.overflow = 'hidden'; textArea.style.height = '0px'; textArea.style.height = textArea.scrollHeight + 'px'; } 

and in html like below

<textarea (keyup)="autogrow()" ></textarea> 

Why you need plugins for this, it's as simple as :

<textarea (keyup)="autoGrowTextZone($event)"></textarea> 

and

autoGrowTextZone(e) { e.target.style.height = "0px"; e.target.style.height = (e.target.scrollHeight + 25)+"px"; } 

Slightly modified answer for tanveer's answer would be to use @ViewChild

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef; public autoGrow() { const textArea = this.textArea.nativeElement; textArea.style.overflow = 'hidden'; textArea.style.height = '0px'; textArea.style.height = textArea.scrollHeight + 'px'; } 

And in the HTML it would be

<textarea (keyup)="autoGrow()" #textArea></textare> 

The solution that worked for me on IE as well as in the other browser

// Usage example: <textarea autoresize></textarea> import { ElementRef, HostListener, Directive} from '@angular/core'; @Directive({ selector: 'textarea[autosize]' }) export class Autosize { @HostListener('input',['$event.target']) onInput(textArea: HTMLTextAreaElement): void { this.adjust(); } constructor(public element: ElementRef){ } ngAfterContentChecked(): void{ this.adjust(); } adjust(): void{ this.element.nativeElement.style.overflow = 'hidden'; this.element.nativeElement.style.height = 'auto'; this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px"; } } 

Add the below code to the APp.Module.ts

@NgModule({ declarations: [ Autosize ] }) 

Use the tag on the HTML

 <textarea autosize></textarea> 

Simply

You can use as below:

<textarea [rows]="text.split('\n').length || 2">{{text}}</textarea> 

or

create a function in ts :

 getHeight(content) { const v1 = Math.floor(content.length / 50); const v2 = content.split('\n').length; return Math.max(v1,v2) } 

HTML:

<textarea [rows]="getHeight(text) || 2">{{text}}</textarea> 

Create the directive from angular-cli and add following code

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appAutoGrow]' }) export class AutoGrowDirective { constructor(public element: ElementRef) { } @Input() maximumHeight: number; // based on pixel @Input() minHeight: number; // based on pixel @HostListener('input', ['$event.target']) @HostListener('cut', ['$event.target']) @HostListener('paste', ['$event.target']) @HostListener('change', ['$event.target']) ngOnInit(): void { this.adjustCustom(); } adjustCustom(): void { const element = this.element.nativeElement; element.style.height = this.minHeight + 'px'; element.style.height = (element.scrollHeight) + 'px'; if (element.scrollHeight <= this.maximumHeight) { element.style.overflowY = 'hidden' delete element.style.maxHeight } else { element.style.overflowY = 'scroll' element.style.maxHeight = this.maximumHeight + 'px'; } } } 

and use the directive as follows

<textarea autofocus [maximumHeight]="200" [minHeight]="43" appAutoGrow></textarea> 

I know the topic is quite old but I just change tanveer's answer to enter maximum Height as well.

 import { Directive, ElementRef, OnInit, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appAutoResize]', }) export class AutoResizeDirective implements OnInit { constructor(public element: ElementRef) { } @Input() maximumHeight: number; // based on pixel @HostListener('input', ['$event.target']) ngOnInit(): void { this.adjust(); } adjust(): void { const ta = this.element.nativeElement; const maxHeghit = this.maximumHeight; ta.style.overflow = 'hidden'; ta.style.height = 'auto'; if (ta.scrollHeight <= maxHeghit) { // while current height is less than maximumHeight ta.style.height = ta.scrollHeight + 'px'; } else { // greater than maximumHeight ta.style.height = maxHeghit + 'px'; ta.style.overflow = 'auto'; } } } 

So, you will have control on the style behavior.
I hope it can help.

Here is the implementation of autosize in a directive which you can reuse on any textarea in your project.

import { Directive, Input, HostBinding } from '@angular/core'; @Directive({ selector: 'textarea[autosize]' }) export class TextareaAutosizeDirective { private _ngModel: any; public get ngModel(): any { return this._ngModel; } @Input() public set ngModel(value: any) { if (this._ngModel !== value) { this._ngModel = value; this.resize(); } } @HostBinding('rows') public rows: number; @Input() public minRows: number = 1; constructor() {} private resize() { this.rows = !this._ngModel ? this.minRows : this.ngModel.split('\n').length; } } 

You can use it in a following way:

<textarea autosize minRows="2" [(ngModel)]="property"></textarea> 

By adding autosize textarea becomes automatically resized. You can also specify minimum number of rows which textarea has.