- Notifications
You must be signed in to change notification settings - Fork15
An Angular2+ directive that autoscale the font size of an element until it fit the upper level container dimension.
License
thisloke/ng2-fittext
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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.
Check out the live demo:ng2-fittext Demo
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 |
- Import the module in your Angular application:
import{Ng2FittextModule}from"ng2-fittext";@NgModule({imports:[Ng2FittextModule]})
- Use the directive in your components:
import{Component}from'@angular/core';@Component({selector:'label',template:` <div #container> <div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div> </div> `})exportclassLabelComponent{}
Fit to the parent element (works if you have a variable number of elements between your element and its parent):
import{Component}from'@angular/core';@Component({selector:'label',template:` <div> <div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div> </div> `})exportclassLabelComponent{}
NEW! Support for auto-resize input box:
import{Component}from'@angular/core';@Component({selector:'inputbox',template:` <div #container> <input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true"> </div> `})exportclassInputBoxComponent{}
NEW! Support for maxFontSize:
import{Component}from'@angular/core';@Component({selector:'inputbox',template:` <div> <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100"> </div> `})exportclassInputBoxComponent{}
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 |
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.
- Write tests
- Find a performant algorithm to find the font size that fits the container better
MIT
Lorenzo I.
About
An Angular2+ directive that autoscale the font size of an element until it fit the upper level container dimension.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors8
Uh oh!
There was an error while loading.Please reload this page.