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
-
Declare it in your module
import {Ng4FittextModule} from 'ng4-fittext';@NgModule -
Use it in your components
The element that contains this directive should have a CSS width!
import {Component} from '@angular/core';@Componentexport 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