Execute Javascript call after Angular element from API rendered

Question

I have an Angular4 project that retrieves an string of HTML content from an API, the HTML can contain multiple blocks of <code>, and I want to highlight these blocks using PrismJS. To make this work, I need to call Prism.highlightAll() after the content has been rendered in the DOM, when I call Prism.highlightAll() after the API call, this doesn't do anything because the element is not instantaneously rendered, to get it to work I am doing a small wait before calling the renderer, this is not a good solution though, and wanted to know if there is a cleaner solution. This is what my code currently looks like:

this.dataService.getPageContent().subscribe(
      res => {
        this.html = this.sanitizer.bypassSecurityTrustHtml(res);
        setTimeout(function() { Prism.highlightAll(); }, 2000);
      },
      err => {
        alert('error');
      }
    );

Vedran Maric · Accepted Answer · 2020-11-15 22:28:03Z

1

You can do it with ngAfterViewChecked lifecycle hook. It will be called after your changes have been rendered. (It is called every time angular checks for changes also, hence the setHighlight guard to only do the highlighting once)

Add new class field:

setHighlight = false

Update your code:

this.dataService.getPageContent().subscribe(
  res => {
    this.html = this.sanitizer.bypassSecurityTrustHtml(res);
    this.setHighlight = true;
  },
  err => {
    alert('error');
  }
);

Add lifecycle hook:

ngAfterViewChecked() {
  if(this.setHighlight){
    Prism.highlightAll(); 
    this.setHighlight = false;
  }
}

edited Nov 15, 2020 at 22:28

answered Nov 15, 2020 at 22:22

Vedran Maric

89410 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CSNooB Over a year ago

Thank you for your help, i ended up using the ngAfterViewChecked, but ditching the setHighlight guard, since ngAfterViewChecked is called after any change on any component (not just the current one), in my example on a page with alot of components, i had 10 calls to this function, and so a call from another component could arrive between the moment the guard is put to true and the moment rendering is made, and in this case the content will not be highlighted. If you can adjust your answer by specifying this (maybe as a remark), I'll mark your answer as acceptable.

Vedran Maric Over a year ago

It seems wasteful to call Prism function on each ngAfterViewChecked. I would either try: 1. Your original solution, but using setTimeout without specifying timeout milliseconds: setTimeout(()=>{ Prism.highlightAll(); }); 2. Keeping my solution. but wrapping this.setHighlight=true in setTimeout: setTimeout(()=>{this.setHighlight = true;});

Collectives™ on Stack Overflow

Execute Javascript call after Angular element from API rendered

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related