stevepapa / angular2-autosize Goto Github PK

Now the min-height is being set to 46px (font-size: 18px). Is there a way to decrease that? I want something like 18px (just one line).

Thanks,
Glauber

Getting this error since @angular-cli/1.0.1

After changing the import from (as suggested in the readme):
import { Autosize } from 'angular2-autosize'
to:
import { Autosize } from 'angular2-autosize/angular2-autosize'
The error disappears.

I have placed textarea in one of the two tabs.
When I switch the tab, text area height is squeezed. Height remains the same until I hover the component.

Hello!
Do you plan do make a version for Angular2 (2.0.0)?

Here is my environment :
angular2-autosize 1.0.1
angular 2.4.7
typescript 2.1.5
npm 3.10.10
Visual Studio 2015

My tsconfig :

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noEmitOnError": true,
    "sourceMap": true,
    "removeComments": false,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true
  }
}

In my application module I want to import the autosize directive. I do as mentioned in the documentation :

import { Autosize } from 'angular2-autosize';

I get a compilation error :

error TS2307: Cannot find module 'angular2-autosize'.

According to typescript documentation about module resolution (see How TypeScript resolves modules section in official documentation), it seems normal as in the npm package of angular2-autosize, there is no typings entry in the package.json file, nor an index.ts file.
It would be well to correct this problem, as it is very easy.

So to continue, i change my import to :

import { Autosize } from 'angular2-autosize/angular2-autosize';

as there is a angular2-autosize.ts file in the npm package.
When I do that, my project compile but the resulting js file is not acceptable as it contains :

System.register("../../node_modules/angular2-autosize/src/autosize.directive", ["@angular/core"], function (exports_67, context_67) {
...
});

I think it is because the npm packages has two problems :

1. the package does not contain a javascript bundle file
2. the package.json file of the package should then reference this file in the entry named main

Ex: if a one line textarea is in a container and the container shrinks in width resulting in the text being multiple lines, the textarea doesnt adjust and the scrollbar is still visible (until you type a character)

My entire Angular application becomes almost unusable when there is ~200 instances of this directive. The cause is ngAfterContentChecked that gets called on every Angular change detection cycle.

I probably should submit a PR but I am pretty busy at work, so this is the changes I made that made it immediately better

import { ElementRef, HostListener, Directive } from '@angular/core';

@Directive({
  selector: 'textarea[autosize]'
})
export class AutosizeTextboxDirective {
  constructor(public element: ElementRef){
  }

  @HostListener('input')
  onInput(textArea: HTMLTextAreaElement): void {
    this.adjust();
  }
  
  // Removed `ngAfterContentChecked` and replaced it with this set timeout, this will run after the content has been rendered by the browser (and grabbing the scrollHeight is possible)
  ngAfterContentInit(): void {
    window.setTimeout(()=>{
      this.adjust();
    }, 0);
  }

  adjust(): void{
    this.element.nativeElement.style.overflow = 'hidden';
    this.element.nativeElement.style.height = 'auto';
    this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px";
  }

}

After npm i angular2-autosize, and adding it to appmodule with:
import { Autosize } from 'angular2-autosize';
Compiller return error: "app.module.ts(10,42): error TS2307: Cannot find module 'angular2-autosize'."

If we import with directory 'angular2-autosize/angular2-autodize', compiller not send error, but web-page return "error: angular2-autosize 404 (Not Found)"

Hey there, I noticed when I install this via npm and include it into my @NgModule code, like you outlined in the documentation, I'm getting this error:

(node:2168) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'content' of null in my console.

Do you have any idea what might be causing it?

I'm actually using this project inside of an Ionic 2 app and I'm using Angular version 2.2.1 and Ionic version 2.0.0.

i am trying to consume this in my project to autoresize my ion-buttons based on the text coming from service dynamically.
when i installed and imported it in my app.modules.ts, its returning me the below error.

Error Message: Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/e571224/Desktop/praveen/UnifiedEventApp/unified-event-app/node_modules/ionic2-autosize/index.js'

ionic2-autosize is also giving the same issue. any idea on how to use it?

Could a new version of this be pushed out to npm? The latest release there is from commit db14b05, which is missing the ngOnInit -> ngAfterContentChecked fix for initial content.

I have some issues importing angular2-autosize module, why is it like this module not found.

And this works,

please fix.

Hello,

I put the directive on a textarea and I note that the seizure becomes very slow. Indeed, the letters appear in jerk.

Here is my code:

<textarea class="form-control title-input" [hidden]="!editingCard" (keydown)="pressKey($event)" (blur)="blur()" [(ngModel)]="card.title"></textarea>

Thank you for your help

Instead of ngOnInit, I have used ngAfterContentChecked.

This way it will start resizing after the bindings are done. Maybe to have this in the original code?

How do I set the beginning height to equal the line-height of my textarea?

Hello,

Im using angular2-autosize with angular2.
I installed with npm and when i lunch my projet i have this error message :

Cannot find angular2-autosize.js 404 not found

have you an idea for fix it ??

thank you

With @angular/[email protected] the autosize module stops working with the error in the description above.

It seems that *.metadata.json files are missing that are needed for the new AOT compilation approach used by angular-cli

See: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

I got above error when i did below steps in ionic2 RC1

npm install angular2-autosize in terminal
import { Autosize } from 'angular2-autosize' in app.module.ts
added 'Autosize' in declarations in app.module.ts

and when i'm trying to run(ionic serve) in terminal i got
Uncaught SyntaxError: Unexpected token export error in console.

when i say 'ionic build' in terminal i got below error

Error: Unexpected value 'Autosize' declared by the module 'AppModule' 
ngc failed 
ionic-app-script task: "build" 
Error: Error 

Do you know why I'm getting the error from import ?
Here's how I import it from node_modules and others like angular2 are imported the same way.

import { Autosize } from 'angular2-autosize/angular2-autosize';

However, the import is giving me the error.

./~/angular2-autosize/angular2-autosize.ts
Module parse failed: /Users/foo/dev/my-app/node_modules/angular2-autosize/angular2-autosize.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {Autosize} from './src/autosize.directive';
| 
| export * from './src/autosize.directive';

I want to set the initial height, like 4.4rem, but it's set automatically like 75px.
I try to use "height: 4.4rem !important", but it's stop the resize.

Any help?

If the input field does not fit vertically on the screen, moving caret to a new line will trigger a screen jump.

Reproduced here on Chrome, Firefox & IE Edge.

Hello! Update npm package. Thanks!