Manually trigger resize?

[sebastientromp]

Hello,

I like that fittext can automatically re-trigger on window resize, and would like to re-trigger the resize on other custom events.
I've tried to use ngModel for this, but it was very hacky (I don't want to change the text itself).

Is there a way to force a resize?

Thanks

[Panda-313]

U can use ngDoCheck to force checking ;)

[vdurante]

@Panda-313 sorry, would you mind explaining how?

[Panda-313]

The easiest solution would be to add fit-text as directive, not by npm. You can try this:
`@Directive({
selector: '[fitText]'
})
export class FitTextDirective implements AfterViewInit, OnInit, OnChanges, DoCheck {

@input() fittext? = true;
@input() compression? = 1;
@input() minFontSize?: number | 'inherit' = 0;
@input() maxFontSize?: number | 'inherit' = Number.POSITIVE_INFINITY;
@input() delay? = 100;
@input() ngModel;
@input() fontUnit?: 'px' | 'em' | string = 'px';
oldText = '';
private fittextParent: HTMLElement;
private fittextElement: HTMLElement;
private fittextMinFontSize: number;
private fittextMaxFontSize: number;
private computed: CSSStyleDeclaration;
private newlines: number;
private lineHeight: string;
private display: string;
private calcSize = 10;
private resizeTimeout: number;

constructor(
private el: ElementRef,
private renderer: Renderer2
) {
this.fittextElement = el.nativeElement;
this.fittextParent = this.fittextElement.parentElement;
this.computed = window.getComputedStyle(this.fittextElement);
this.newlines = this.fittextElement.childElementCount > 0 ? this.fittextElement.childElementCount : 1;
this.lineHeight = this.computed['line-height'];
this.display = this.computed['display'];
}

ngDoCheck() {
if (this.oldText !== this.el.nativeElement.innerHTML) {
this.setFontSize();
}
this.oldText = this.el.nativeElement.innerHTML;
}

public ngOnInit() {
this.fittextMinFontSize = this.minFontSize === 'inherit' ? this.computed['font-size'] : this.minFontSize;
this.fittextMaxFontSize = this.maxFontSize === 'inherit' ? this.computed['font-size'] : this.maxFontSize;
}

public ngAfterViewInit() {
this.setFontSize();
}

public ngOnChanges(changes: SimpleChanges) {
if (changes['compression'] && !changes['compression'].firstChange) {
this.setFontSize();
}
if (changes['ngModel']) {
this.fittextElement.innerHTML = this.ngModel;
this.setFontSize();
}
}

private setFontSize = (): void => {
this.resizeTimeout = setTimeout(
(() => {
if (this.fittextElement.offsetHeight * this.fittextElement.offsetWidth !== 0) {
// reset to default
this.setStyles(this.calcSize, 1, 'inline-block');
// set new
this.setStyles(this.calculateNewFontSize(), this.lineHeight, this.display);
}
}).bind(this),
this.delay
);
};

private calculateNewFontSize = (): number => {
const ratio = (this.calcSize * this.newlines) / this.fittextElement.offsetWidth / this.newlines;

return Math.max(
  Math.min(
    (this.fittextParent.offsetWidth -
      (parseFloat(getComputedStyle(this.fittextParent).paddingLeft) +
        parseFloat(getComputedStyle(this.fittextParent).paddingRight)) -
      6) *
    ratio *
    this.compression,
    this.fittextMaxFontSize
  ),
  this.fittextMinFontSize
);

};

private setStyles = (fontSize: number, lineHeight: number | string, display: string): void => {
this.renderer.setStyle(this.fittextElement, 'fontSize', fontSize.toString() + this.fontUnit);
this.renderer.setStyle(this.fittextElement, 'lineHeight', lineHeight.toString());
this.renderer.setStyle(this.fittextElement, 'display', display);
};
}
`
I've modified the code a bit to use ngDoCheck
Than use it is same way