angular-fittext

angular-fittext

Change Log

Heres the demo!

Angular directive (typescript) to do what fittext.js did when jquery was cool. This auto-scales the font size to fit the width of it's container.

Versioning & What heppened to ng4-fittext?

This package was renamed angular-fittext to get rid of the ng version binding. This will follow the updates for angular and will not need to be bound specifically to a version of angular. We have kept the same github repo, but renamed it to angular-fittext.

Installation

Install the library

$ npm install --save angular-fittext

Usage

Import it in your Angular project as a module

• Declare it in your module

  import {AngularFittextModule} from 'angular-fittext';
  
  @NgModule({
    imports: [
      AngularFittextModule,
      ...
    ]
  })
  
  

• Use it in a component

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

  import {Component} from '@angular/core';
  
  @Component({
    selector: 'hero',
    template: `
      <div style="align-content: center;">
          <div style="width: 20%; height: 20%; margin: 0 auto;">
              <div fittext>test</div>
          </div>
       </div>`
  })
  
  export class AppComponent {}
  

  Parameters:

Parameter	Description	Values
fittext (required)	Selector for the directive.	boolean (defaults to true)
[activateOnResize] (optional)	enable/disable the auto-scale in case of window resize	boolean (defaults to true)
[compression] (optional)	compression rate. How fast should the text resize? *As of v1.2.0, this can receive a dynamic value.	number (defaults to 1)
[minFontSize] (optional)	minimum font size allowed on element	number (defaults to 0)
[maxFontSize] (optional)	maximum font size allowed on element	number (defaults to infinity)
[delay] (optional)	time to delay resize (in nanoseconds)	number (defaults to 100)
[fontUnit] (optional)	font unit to apply to the fontSize	px, em, ... (defaults to px)

Development

Want to contribute? Great! Simply, clone the repository!

License

ISC

- Rich