Can't get 'Fitty' to work with Angular 2+

Question

I am attempting to use ' Fitty ' to create text that has varying font-size as to fit justified within a div within a container.

I am using Angular and saw that Fitty was mainly created as a regular JS script to be ran in the browser. After a bit of poking around I found this thread on Github and somebody seemed to have the same idea I did, but what they suggest, I just cannot seem to get working.

I wondered if anybody had done this in the past?

Here is a link to my Stackblitz if you wish to check it out. I have installed the Fitty dependency there.

The gist of what the github thread is saying is to import and use such as:

import fitty from 'fitty';

...
myElement = document.getElementById('myEl');
this.fit = fitty(myElement, { minSize: 50, maxSize: 300, multiLine: true });
this.fit.fit();

Answer 1

You are trying to access HTML DOM inside ngOnInit. But as per Angular Life cycle hook, we are suppose too access inside ngAfterViewInit.

ngAfterViewInit(){
    const myDiv = document.getElementById('x');
    this.fits = fitty(myDiv, { minSize: 50, maxSize: 300})
    this.fits.fit();
}

https://stackblitz.com/edit/fitty-angular-xuafvj ?