README
ng2-fittext
An Angular2 directive written in pure typescript (and without jquery!), for autoscale the font size of an element to fit an upper level container.
Demo
http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview
Installation
Install the library
$ npm install --save ng2-fittext
Usage
- Declare it in your module
import {Ng2FittextModule} from "ng2-fittext"; @NgModule({ imports: [ Ng2FittextModule ] })
- Use it in your components
import {Component} from '@angular/core'; @Component({ selector: 'label', template: `<div #container> <div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div> </div>` }) export class LabelComponent {}
Examples
Fit with the parent element (this works if you have a variable number of element between element and parent)
import {Component} from '@angular/core';
@Component({
selector: 'label',
template: `<div>
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
</div>`
})
export class LabelComponent {}
NEW! Support for autoresize input box!
import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
template: `<div #container>
<input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true">`,
</div>`
})
export class InputBoxComponent {}
NEW! Support for maxFontSize!
import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
template: `<div>
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100">`,
</div>`
})
export class InputBoxComponent {}
Input Parameters:
Parameter | Description | Values |
---|---|---|
fittext | is the selector of the directive | true/false |
container | the container to fit (if not present it fit default to parent container) | ElementRef |
activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) |
activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) |
maxFontSize | maximal font size | number, default is 1000 |
!deprecated! useMaxFontSize | use max font size if is true | deprecated! |
minFontSize | minimal font size | number, default is 7 |
modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated | any type of model |
Output Parameters:
Parameter | Description | Values |
---|---|---|
fontSizeChanged | current font size | string |
Development
Want to contribute? Great! Simply, clone the repository!
I created this library because I always spended too much time for solve this problem and because i didn't find nothing on the web (13/03/2017) that do this without jquery and easily integrable in angular2. For sure is not a good implementation, maybe is not the best way to do it, but, it do the job.
Todos
- Write tests
- Find a better algorithm to find the font-size who fits better the container
License
MIT
Lorenzo I.