.gitignore

@@ -8,3 +8,4 @@ Thumbs.db
 *.js
 *.map
 *.d.ts
+.idea

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

README.md

@@ -32,6 +32,23 @@ Import it in your Angular2 project like a module
     ```
 
 2) Use it in your components
+
+    Fit with specified container (can be the parent or a deeper ancestor)
+    ```sh
+   import {Component} from '@angular/core';
+
+    @Component({
+      selector: 'label',
+      template: `<div #container>
+                    <div [fittext]="true" [activateOnResize]="true" [container]="container" [useMaxFontSize]="false">Bla bla bla...</div>
+                </div>`
+    })
+
+    export class LabelComponent {}
+    ```
+
+
+    Fit with the parent element (this works if you have a variable number of element between element and parent)
     ```sh
    import {Component} from '@angular/core';
 
@@ -45,6 +62,8 @@ Import it in your Angular2 project like a module
     export class LabelComponent {}
     ```
 
+
+
     **NEW! Support for autoresize input box!**
 
     ```sh
@@ -52,22 +71,43 @@ Import it in your Angular2 project like a module
 
     @Component({
       selector: 'inputbox',
-      template: `<div>
-                    <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [useMaxFontSize]="false">`,
+      template: `<div #container>
+                    <input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true" [useMaxFontSize]="false">`,
                 </div>`
     })
 
     export class InputBoxComponent {}
     ```
 
+
+
+    **NEW! Support for maxFontSize!**
+
+    ```sh
+   import {Component} from '@angular/core';
+
+    @Component({
+      selector: 'inputbox',
+      template: `<div>
+                    <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [useMaxFontSize]="true">`,
+                </div>`
+    })
+
+    export class InputBoxComponent {}
+    ```
+
+
    Parameters:
 
   | Parameter | Description | Values |
   | --- | --- | --- |
   | fittext | is the selector of the directive | true/false
+  | container | the container to fit (if not present it fit default to parent container)| ElementRef
   | activateOnResize | enable/disable the autofit in case of window resize | true or false (default false)
   | activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false)
   | useMaxFontSize | Use font-size from element as maximum font-size | enable/disable the usage of max font-size of the lement
+  | minFontSize | minimal font size | number, default is 7
+  | modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated | any type of model
 
 
 ### Development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-fittext",
-  "version": "1.0.17",
+  "version": "1.0.23",
   "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.",
   "main": "index.js",
   "scripts": {

src/ng2fittext.directive.ts

@@ -1,14 +1,17 @@
-import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit} from '@angular/core';
+import {Directive, ElementRef, Renderer, Input, AfterViewInit, AfterViewChecked, HostListener, OnInit, OnChanges, SimpleChanges} from '@angular/core';
 
 @Directive({
   selector: '[fittext]'
 })
-export class FittextDirective implements AfterViewInit, OnInit {
+export class Ng2FittextDirective implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
 
   @Input('fittext') fittext: any;
   @Input('activateOnResize') activateOnResize: boolean;
+  @Input('container') container: any;
   @Input('activateOnInputEvents') activateOnInputEvents: boolean;
   @Input('useMaxFontSize') useMaxFontSize: boolean;
+  @Input('minFontSize') minFontSize = 7;
+  @Input('modelToWatch') modelToWatch: any;
   private maxFontSize: number = 1000;
   private fontSize: number = 0;
   private speed: number = 1.05;
@@ -17,7 +20,10 @@ export class FittextDirective implements AfterViewInit, OnInit {
   }
 
   setFontSize(fontSize) {
-    console.log();
+    if (fontSize < this.minFontSize) {
+      // force that font size will never be lower than minimal allowed font size
+      fontSize = this.minFontSize;
+    }
 
     this.fontSize = fontSize;
     return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
@@ -28,8 +34,7 @@ export class FittextDirective implements AfterViewInit, OnInit {
     return Math.floor(fontSize / speed);
   }
 
-  checkOverflow(children: any) {
-    const parent = children.parentElement;
+  checkOverflow(parent: any, children: any) {
 
     let overflowX = children.scrollWidth - parent.clientWidth;
     let overflowY = children.clientHeight - parent.clientHeight;
@@ -40,10 +45,11 @@ export class FittextDirective implements AfterViewInit, OnInit {
   onResize() {
     if (this.activateOnResize && this.fittext) {
       if (this.activateOnInputEvents && this.fittext) {
-          this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
+        this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
       } else {
-        this.setFontSize(this.el.nativeElement.parentElement.clientWidth);
+        this.setFontSize(this.container ? this.container.clientWidth : this.el.nativeElement.parentElement.clientWidth);
       }
+
       this.ngAfterViewInit();
     }
   }
@@ -51,29 +57,55 @@ export class FittextDirective implements AfterViewInit, OnInit {
   @HostListener('input', ['$event'])
   onInputEvents() {
     if (this.activateOnInputEvents && this.fittext) {
-        this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
+      this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
       this.ngAfterViewInit();
     }
   }
 
   ngOnInit() {
     if (this.useMaxFontSize) {
-      this.maxFontSize = parseInt(window.getComputedStyle(this.el.nativeElement).fontSize, null);
+      this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null);
     }
 
     if (this.fittext) {
       this.setFontSize(this.maxFontSize);
     }
+
     this.el.nativeElement.style.setProperty('will-change', 'content');
   }
 
   ngAfterViewInit() {
     if (this.fittext) {
-      let overflow = this.checkOverflow(this.el.nativeElement);
+      let overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement)
+          : this.checkOverflow(this.el.nativeElement.parentElement, this.el.nativeElement);
       if (overflow) {
+        if (this.fontSize > this.minFontSize) {
+          // iterate only until font size is bigger than minimal value
           this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
           this.ngAfterViewInit();
         }
+      } else {
+        if (this.useMaxFontSize) {
+          if (this.fontSize > this.maxFontSize) {
+            this.maxFontSize = parseInt(window.getComputedStyle(this.container ? this.container : this.el.nativeElement.parentElement).fontSize, null);
+            this.setFontSize(this.maxFontSize);
+          }
+        }
+      }
+    }
+  }
+
+  ngOnChanges(changes: any): void {
+    if (changes.modelToWatch) {
+      // change of model to watch - call ngAfterViewInit where is implemented logic to change size
+      setTimeout(_ => this.ngAfterViewInit() );
+    }
+  }
+
+  ngAfterViewChecked() {
+    if (this.fontSize > this.minFontSize) {
+      this.setFontSize(this.container ? this.container.clientHeight : this.el.nativeElement.parentElement.clientHeight);
+      this.ngAfterViewInit();
     }
   }
 }