ng2-fittext

Ng2-fittext: An Angular2+ directive that change the font size until it fit the upper level container dimension.

Usage no npm install needed!

<script type="module">
  import ng2Fittext from 'https://cdn.skypack.dev/ng2-fittext';
</script>

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

  1. Declare it in your module
    import {Ng2FittextModule} from "ng2-fittext";
    @NgModule({
      imports: [
        Ng2FittextModule
      ]
    })
    
  2. 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.