Nameless Package Manager

    ng4-fittext
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    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

    1. Declare it in your module

      import {Ng4FittextModule} from 'ng4-fittext';
      @NgModule({
        imports: [
          Ng4FittextModule
        ]
      })
       
    2. Use it in your components

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

      import {Component} from '@angular/core';
       
      @Component({
        selector: 'hero',
        template: `<div #heroContainer class="hero"> 
                      <h1 [fittext]
                          [activateOnResize]="true" 
                          [container]="heroContainer"
                          [minFontSize]="16"
                          [maxFontSize]="200"
                          [compression]="1.2">
                          RESIZE THIS TEXT
                      </h1>
                  </div>`
      })
       
      export 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

    Install

    npm i ng4-fittext

    DownloadsWeekly Downloads

    71

    Version

    1.2.0

    License

    ISC

    Last publish

    Collaborators

    • sollenne