autosize textarea in angular2

Question

I am working on angular2 applciation. i have a requirement to autosize textarea. I am trying to reuse the angular2-autosize from https://github.com/stevepapa/angular2-autosize

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.

Answer 1

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>

Answer 2

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

npm install ngx-autosize

https://github.com/chrum/ngx-autosize

Old answer:

I had the same problem today and got it fixed! Please check my fork: https://github.com/chrum/angular2-autosize

Until PR is merged try:

npm install https://github.com/chrum/angular2-autosize.git --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
  ]
  ...
})

Answer 3

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 id="textarea" (keyup)="autogrow()" ></textarea>