@vijhhh2/angular-fittext
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

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

  1. Declare it in your module

    import {AngularFittextModule} from 'angular-fittext';
    
    @NgModule({
      imports: [
        AngularFittextModule,
        ...
      ]
    })
    
  2. 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

Package Sidebar

Install

npm i @vijhhh2/angular-fittext

Weekly Downloads

4

Version

2.1.2

License

MIT

Unpacked Size

38.8 kB

Total Files

11

Last publish

Collaborators

  • vijhhh2