ng2-fittext/src/ng2fittext.directive.ts

import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener, OnInit} from '@angular/core';

@Directive({
  selector: '[fittext]'
})
export class FittextDirective implements AfterViewInit, OnInit {

  @Input('fittext') fittext: any;
  @Input('activateOnResize') activateOnResize: boolean;
  @Input('activateOnInputEvents') activateOnInputEvents: boolean;
  private fontSize: number = 0;
  private speed: number = 1.05;

  constructor(public el: ElementRef, public renderer: Renderer) {
  }

  setFontSize(fontSize) {
    this.fontSize = fontSize;
    return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString() + 'px');
  }

  calculateFontSize(fontSize, speed) {
    // TODO Do with Gauss
    return Math.floor(fontSize / speed);
  }

  checkOverflow(children: any) {
    const parent = children.parentElement;

    let overflowX = children.scrollWidth - parent.clientWidth;
    let overflowY = children.clientHeight - parent.clientHeight;
    return (overflowX > 1 || overflowY > 1);
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
    if (this.activateOnResize && this.fittext) {
      if (this.activateOnInputEvents && this.fittext) {
          this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
      } else{
        this.setFontSize(this.el.nativeElement.parentElement.clientWidth);
      }
      this.ngAfterViewInit();
    }
  }

  @HostListener('input', ['$event'])
  onInputEvents() {
    if (this.activateOnInputEvents && this.fittext) {
        this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
        this.ngAfterViewInit();
    }
  }

  ngOnInit() {
    if (this.fittext) {
      if (this.activateOnInputEvents) {
        this.setFontSize(this.el.nativeElement.parentElement.clientHeight);
      } else {
        this.setFontSize(this.el.nativeElement.parentElement.clientWidth);
      }
    }
    this.el.nativeElement.style.setProperty('will-change', 'content');
  }

  ngAfterViewInit() {
    if (this.fittext) {
      let overflow = this.checkOverflow(this.el.nativeElement);
      if (overflow) {
        this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
        this.ngAfterViewInit();
      }
    }
  }
}