ngx-fit-text

Angular FitText

An Angular implementation of @patrickmarabeas/ng-FitText.js

From the original description (slightly edited for clarity):

Ngx-FitText makes font-sizes flexible. Use this Angular directive in your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Prerequisites

This directive has been tested with Angular 5 and Angular CLI. Let me know if you make it work with different versions and tools.

Installing

Install into your Angular CLI project root folder.

npm install ngx-fittext -S

Usage

Import into AppModule

Help wanted! - At the moment of writing I'm still new to the world of Angular libraries, so I'm in the process of figuring out how to let you avoid having to import the module at the root level instead of importing it just where you need it.

Let me know if you can help with this, and please feel free to open a PR.

// src/app/app.module.ts
 
...
import { NgxFitTextModule } from 'ngx-fit-text';
...
 
@NgModule({
  ...
  imports: [
    ...
    NgxFitTextModule.forRoot()
  ],
  ...
})
export class AppModule { }

Use in a component template

Basic usage

Important! - The HTML element you apply the directive to, must have a parent element!

<header>
  <h1 [ngxFitText]>Look at how I resize myself</h1>
</header>

Options (currently implemented but untested)

Compression ratio (accepts float, default: 1)
Set a overall compression ratio.

<header>
  <h1 [ngxFitText]="0.9">
    Look at how I resize myself
  </h1>
</header>

Minimum / maximum font size (accepts px or 'inherit', default min: 0, default max: Number.POSITIVE_INFINITY)

<header>
  <h1
    [ngxFitText]
    [ngxFitTextMin]="11"
    [ngxFitTextMax]="18"
  >
    Look at how I resize myself between 11px and 18px
  </h1>
</header>

Debounce resizing (accepts milliseconds, default: 100)
i.e. for controlling how to debounce the window.resize event

<header>
  <h1
    [ngxFitText]
    [ngxFitTextDelay]="1000"
  >
    Look at how I resize myself after 1 second
  </h1>
</header>

Development and Contributing

Prerequisites

You'll need @gonzofish/angular-librarian.
Go ahead and install it, and make sure to follow the instructions about how to make it work in the command line.

It's also important to have a EditorConfig plugin installed and active in you editor / IDE, so that your code will follow the project's style on a base level.

Linting and prettifying tools will be added in the future.

Installing

1. Clone this repository
2. Go inside the project's root directory: cd ngx-fit-text
3. Install Node modules: npm install
4. Hack away

Working with Angular Librarian

You can find all the info about how to run a Angular Librarian project in its documentation, but here's two handy commands:

1. ngl serve - to run the project's examples into a Webpack DevServer
2. npm test - to run the unit tests before submitting a PR

Built With

• Angular Librarian - Helping to deal with maintaining an Angular library
• NPM - Dependency Management

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Patrick Marabeas - Original AngularJS version - patrickmarabeas
• William Ghelfi - Angular port - ngTrumbitta

License

This project is licensed under the ISC License - see the LICENSE.md file for details

Acknowledgments

• Patrick Marabeas for its initial work