From c76d6dbb1afe7122f73ac98b4b5cf3fef2bfb021 Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Fri, 19 May 2017 13:17:30 +0200 Subject: [PATCH] Added rxjs in packege.json; Added activateOnInputEvents proprierty for listen the events in input element and resize when it occurs --- package.json | 3 ++- src/ng2fittext.directive.ts | 15 ++++++++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 64e3c6b..743e4e7 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ }, "homepage": "https://github.com/lokenxo/ng2-fittext#readme", "dependencies": { - "@angular/core": "^4.0.1" + "@angular/core": "^4.0.1", + "rxjs": "^5.4.0" }, "devDependencies": { "typescript": "~2.2.2" diff --git a/src/ng2fittext.directive.ts b/src/ng2fittext.directive.ts index 3f53ee2..46bfb81 100644 --- a/src/ng2fittext.directive.ts +++ b/src/ng2fittext.directive.ts @@ -8,15 +8,16 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { @Input('fittext') fittext: any; @Input('container') container: 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'); + this.fontSize = fontSize; + return this.el.nativeElement.style.setProperty('font-size', (fontSize).toString()+'px'); } calculateFontSize(fontSize, speed){ @@ -38,6 +39,14 @@ export class Ng2FittextDirective implements AfterViewInit, OnInit { } } + @HostListener('input', ['$event']) + onInputEvents() { + if(this.activateOnInputEvents && this.fittext) { + this.setFontSize(this.container.clientHeight); + this.ngAfterViewInit(); + } + } + ngOnInit() { if (this.fittext) { this.setFontSize(this.container.clientWidth);