tudorgergely / angular2-stretchy

angular2-stretchy is an Angular2 directive that automatically adjusts input width to fit content.

angular2-stretchy

angular2-stretchy is an Angular2 directive that automatically adjusts input width to fit content.

Demo:

https://tudorgergely.github.io/angular2-stretchy/

Installation:

npm install angular2-stretchy

Use Example:

Add the declaration to your @NgModule:

import {StretchyModule} from 'angular2-stretchy';

...

@NgModule({
  imports: [
    StretchyModule
  ]
})

Use directly inside your HTML templates

<input stretchy />

Set normal styling on input such as min-width

<input stretchy style="min-width: 300px;"/>

Author

Tudor Gergely

Licence

This project is licensed under the MIT license. See the LICENSE file for more info.

angular2-stretchy's Issues

invoke width with pre-filled input value.

Add following to ngOnInit to enable width auto assign

setTimeout(()=>{ this.sizeDiv.innerText = this.elementRef.nativeElement.value; this.inputWidth = this.sizeDiv.getBoundingClientRect().width; })

Badly packaged library for Angular 5

Hello I'm facing this output after updating my app to Angular 5:

ERROR in ./node_modules/angular2-stretchy/index.ts
Module build failed: Error: ./node_modules/angular2-stretchy/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

npm - 5.5.1
node - 8.9.3

"dependencies": {
    "@angular/animations": "5.2.1",
    "@angular/common": "5.2.1",
    "@angular/compiler": "5.2.1",
    "@angular/core": "5.2.1",
    "@angular/forms": "5.2.1",
    "@angular/http": "5.2.1",
    "@angular/platform-browser": "^5.2.1",
    "@angular/platform-browser-dynamic": "^5.2.1",
    "@angular/router": "^5.2.1",
    "angular2-stretchy": "^1.0.1",
    "animate.css": "^3.5.2",
    "chart.js": "^2.6.0",
    "compression": "^1.7.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "morgan": "^1.8.1",
    "rotating-file-stream": "^1.2.2",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "5.2.1",
    "@angular/language-service": "5.2.1",
...