Need to load the innerHTML then run the function

Question

I am trying to call this highlight() on the ngOnInit but I am getting this error: ERROR TypeError: Cannot read property 'innerHTML' of null.

In the ngOninit I have

this.annotationSub = this.annotationService
      .getWordUpdateListenerTwo()
      .subscribe((theHardWords: ComplexWord[]) => {
        this.thewords = [];
        this.theHardWords = theHardWords;
        this.theHardWords.map(word => {
          this.thewords.push(word.word);
          this.wordWithAnnotation.push(word);
        });
      });

this.postsSub = this.postsService
     .getPostUpdateListenerTwo()
     .subscribe((posts: Post[]) => {
            this.posts = posts;
            this.posts.map(post => {
              if (post.id === this.id) {
                 this.postIWant = post.fileText;
              }
            });
    });
    this.highlight(this.thewords); 

This picks out the post which then gets displayed shown below:

My HTML:

<div id="scrollable">
    {{ postIWant }}
</div>

This is the highlight function which is giving me the problems, If I call this highlight function after the document has loaded with a button it works fine, but If I call it in the ngOnInit it does not give enough time for the innerHTML to get populated therefore throws an error.

I have tried using ngAfterViewInit(): void {} but still even that does not give it enough time. Below is the highlight function.

highlight(words) {
    const high = document.getElementById('scrollable');
    const paragraph = high.innerHTML.split(' ');
    const res = [];

    paragraph.map(word => {
      let t = word;
      if (words.indexOf(word) > -1) {
        t =
          '<a class="clickable" style="background-color: yellow; text-decoration: underline;">' +
          word +
          '</a>';
      }
      res.push(t);
    });
    high.innerHTML = res.join(' ');
    const elementsToMakeClickable = document.getElementsByClassName(
      'clickable'
    );
    const elementsToMakeClickableArray = Array.from(elementsToMakeClickable);
    elementsToMakeClickableArray.map(element => {
      element.addEventListener('click', this.viewAnnotation.bind(this));
    });
    document.getElementById('btnHighLight').style.visibility = 'visible';
}

As mentioned earlier, it works if I load the page up and press a button to trigger the highlight() but I want it to run that function and highlight the words without me having to click anything. Does anyone have any ideas? Thanks!

(I am using Angular).

Answer 1

I can see that you are not properly synchronizing you observables. I will rather combine observables from annotationService and postsService. Then subscribe and execute this.highlight(this.thewords);.

Here is example (in RxJS 6):

const annotation$ = this.annotationService.getWordUpdateListenerTwo();
const posts$ = this.postsService.getPostUpdateListenerTwo();


annotation$.pipe(combineLatest(posts$, (annotations, posts) => ({annotations, posts}))).subscribe((annotations, posts) => {

 // Do your logic here and after execute highlight()

 this.highlight(thewords);
});

In example above I combining annotation$and posts$ which means that subscription will be executed on latest observables. Then I am guessing you will have do your logic which you need on on the end you can execute highlight().

But, above approach doesn't ensure that scrolable div will be loaded before combined observable finished. To listen changes on particular DOM element you can use MutationObserver API and create custom directive which can be added to scrollable div. Please see following article Listening to DOM Changes Using MutationObserver in Angular.

You can also try to access to your HTML via ViewChild. Please see more in following stackoverflow question: How can I select an element in a component template?

Answer 2

Your document.getElementById('scrollable'); call is returning null.

This is why you aren't supposed to interact with the DOM in Angular. Angular completely decouples it and gives you an API to interact with it.

ngOnInit is called after the component's Inputs and Outputs have been resolved. ngAfterViewInit is called once the view template is attached and template variables have been resolved.

There is no lifecycle hook in Angular that fires once a component's markup is attached to the DOM.

There's a number of ways you can get the element through Angular and not via DOM queries, but none are necessary here.

Just bind it in the markup:

component.html:

<div id="scrollable">
  <a class="clickable inline-styling-is-bad" style="background-color: yellow; text-decoration: underline;">
    {{ postIWant }} 
  </a>
</div>

If you need a repeating series of elements based on an array...it seems obvious, but just use *ngFor.

Your Observable streams have some issues as well, but that's out of scope for this topic.