https://github.com/thisloke/ng2-fittext
An Angular2+ directive that autoscale the font size of an element until it fit the upper level container dimension.
https://github.com/thisloke/ng2-fittext
angular angular2-directive font-automatic-resizing font-size ng2-fittext responsive text-automatic-resizing text-resize
Last synced: 11 months ago
JSON representation
An Angular2+ directive that autoscale the font size of an element until it fit the upper level container dimension.
- Host: GitHub
- URL: https://github.com/thisloke/ng2-fittext
- Owner: thisloke
- License: mit
- Created: 2017-03-14T10:00:38.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-07-10T12:10:50.000Z (over 1 year ago)
- Last Synced: 2025-03-23T18:50:27.121Z (12 months ago)
- Topics: angular, angular2-directive, font-automatic-resizing, font-size, ng2-fittext, responsive, text-automatic-resizing, text-resize
- Language: TypeScript
- Homepage:
- Size: 11.9 MB
- Stars: 32
- Watchers: 4
- Forks: 15
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ng2-fittext
An Angular 2+ directive, written in pure TypeScript (without jQuery!), to automatically scale the font size of an element so that it fits within its parent container.
[](https://www.npmjs.com/package/ng2-fittext)
[](https://opensource.org/licenses/MIT)
## Demo
Check out the live demo: [ng2-fittext Demo](https://stackblitz.com/edit/stackblitz-starters-7ghzat?file=src%2Fmain.ts)
## Installation
Install the library using npm according to your angular version (see table below):
| Angular | ng2-fittext | command |
|---------|-------------|-------------------------------|
| <= v17 | 1.4.3 | ```npm i ng2-fittext@1.4.3``` |
| >= v18 | 2.0.0 | ```npm i ng2-fittext@2.0.0``` |
### Usage
1. Import the module in your Angular application:
```ts
import { Ng2FittextModule } from "ng2-fittext";
@NgModule({
imports: [Ng2FittextModule]
})
```
2. Use the directive in your components:
```ts
import { Component } from '@angular/core';
@Component({
selector: 'label',
template: `
Bla bla bla...
`
})
export class LabelComponent {}
```
### Examples
Fit to the parent element (works if you have a variable number of elements between your element and its parent):
```ts
import { Component } from '@angular/core';
@Component({
selector: 'label',
template: `
Bla bla bla...
`
})
export class LabelComponent {}
```
**NEW! Support for auto-resize input box:**
```ts
import { Component } from '@angular/core';
@Component({
selector: 'inputbox',
template: `
`
})
export class InputBoxComponent {}
```
**NEW! Support for maxFontSize:**
```ts
import { Component } from '@angular/core';
@Component({
selector: 'inputbox',
template: `
`
})
export class InputBoxComponent {}
```
Input Parameters:
| Parameter | Description | Values |
| ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- |
| fittext | Directive selector | true/false |
| container | The container to fit (if not present it fits to the parent container by default) | ElementRef |
| activateOnResize | Enable/disable the autofit on window resize | true or false (default false) |
| activateOnInputEvents | Enable/disable the auto-fit in case of input box events (keydown, keyup etc..) | true or false (default false) |
| maxFontSize | Maximum font size | Number (default is 1000) |
| **!deprecated!** useMaxFontSize | Use max font size if is true | Deprecated! |
| minFontSize | Minimum 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 spent too much time solving this problem and didn't find anything on the web (as of 13/03/2017) that does this without jQuery and is easily integrable in Angular 2+.
While it might not be the best implementation, it gets the job done.
### Todos
- Write tests
- Find a performant algorithm to find the font size that fits the container better
## License
MIT
**Lorenzo I.**