diff --git a/README.md b/README.md index e69de29..11a3c3c 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,80 @@ +# ng4-fittext + +Angular4 directive (typescript) to do what fittext.js did when jquery was cool. + +Basically, This auto-scales the font size to fit the width of it's container. + + +### Demo + +coming soon + +### Installation + +Install the library +```sh +$ npm install --save ng4-fittext +``` + +### Usage + +Import it in your Angular4 project like a module + +1) Declare it in your module + ```sh + import {Ng4FittextModule} from "ng4-fittext/ng4fittext"; + @NgModule({ + imports: [ + Ng4FittextModule + ] + }) + + ``` + +2) Use it in your components + ```sh + import {Component} from '@angular/core'; + + @Component({ + selector: 'hero', + template: `
+

RESIZES THIS TEXT

+
` + }) + + export class HeroComponent {} + ``` + + Parameters: + + | Parameter | Description | Values | + | --- | --- | --- | + | fittext | is the selector of the directive | true/false + | container | the container to fit | ElementRef + | activateOnResize | enable/disable the auto-scale in case of window resize | true or false (default false) + | compression | compression rate. How fast should the text resize | number (default 1) + | minFontSize | enable/disable the autofit in case of window resize | number (default -infinity) + | MaxFontSize | enable/disable the autofit in case of window resize | number (default bitSize limit) + + +### Development + +Want to contribute? Great! +Simply, clone the repository! + +fittext.js was pretty useful up until nobody liked jquery anymore. There was an existing ng-1 lib and a sketchy ng-2 directive. This should take care of ng-4+. + +### Todos + + - Write tests + - default max font size + - default min font size + +License +---- + +ISC + + +**- Rich** + \ No newline at end of file diff --git a/package.json b/package.json index 58f2417..793db60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng4-fittext", - "version": "1.0.1", + "version": "1.0.2", "description": "An Angular4.* directive to auto-scale the font-size of an element to fit it's parent element.", "main": "index.ts", "scripts": { diff --git a/src/ng4fittext.directive.ts b/src/ng4fittext.directive.ts index ade1ba0..77ae3de 100644 --- a/src/ng4fittext.directive.ts +++ b/src/ng4fittext.directive.ts @@ -5,10 +5,9 @@ import {Directive, ElementRef, Input, AfterViewInit, HostListener} from '@angula }) export class Ng4FittextDirective implements AfterViewInit { - @Input('appFitTextDirective') fittext: boolean; + @Input('fittext') fittext: boolean; @Input('container') container: HTMLDivElement; @Input('activateOnResize') activateOnResize = true; - @Input('activateOnInputEvents') activateOnInputEvents: boolean; @Input('maxFontSize') maxFontSize: number; @Input('minFontSize') minFontSize: number; @Input('compression') compression: number;