stevepapa / angular2-autosize Goto Github PK
View Code? Open in Web Editor NEWangular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.
License: MIT License
angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.
License: MIT License
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 :
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.