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);