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

$ npm install --save ng4-fittext

Usage

Import it in your Angular4 project like a module

1. Declare it in your module

   import {Ng4FittextModule} from 'ng4-fittext';
   @NgModule({
     imports: [
       Ng4FittextModule
     ]
   })
    

2. Use it in your components

   The element that contains this directive should have a CSS width!

   import {Component} from '@angular/core';
    
   @Component({
     selector: 'hero',
     template: `<div #heroContainer class="hero"> 
                   <h1 [fittext]
                       [activateOnResize]="true" 
                       [container]="heroContainer"
                       [minFontSize]="16"
                       [maxFontSize]="200"
                       [compression]="1.2">
                       RESIZE THIS TEXT
                   </h1>
               </div>`
   })
    
   export class HeroComponent {}

   Parameters:

Parameter	Description	Values
[fittext] (required)	Selector for the directive. It accepts a boolean value but defaults true. You can disable the directive for this element by passing in false. But why? just remove it to disable.	boolean (default true)
[container] (required)	Your fittext elements parent. Must be a div	ElementRef (<div>)
[activateOnResize] (optional)	enable/disable the auto-scale in case of window resize	boolean (default true)
[compression] (optional)	compression rate. How fast should the text resize	number (default 1)
[minFontSize] (optional)	minimum font size allowed on element	number (default -infinity)
[maxFontSize] (optional)	maximum font size allowed on element	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

License

ISC

- Rich