Reload PrimeJS highlighted code Angular app

Question

I have the next question.. I have an Angular 4+ app and I'm using PrimeJS to handle syntax highlighting (I followed Tero's tutorial https://auralinna.blog/post/2017/code-syntax-highlighting-with-angular-and-prismjs). The problem I have is as follow:

In my component template I have the next code:

<pre><code [ngClass]="languageClass">{{ text }}</code></pre>

as you can see, I'm making a binding to handle different code and format according to some conditions in the component.. For some reason when the text and languageClass properties change, it is not being reflected on the template. The highlighted code get stucked with the very first value setted in the component. Any idea how to solve this ? Thanks

Answer 1

I finally solve it by calling the template change detection manually as soon as the code property binding change.. the code looks something like:

import { ChangeDetectorRef, .... } from '@angular/core';

@Component({....})
export class MyComponent {
    constructor(private ref: ChangeDetectorRef) {}
    ...
    getSomeText() {
        this.text = null;
        this.ref.detectChanges();
        ...
        this.text = '<foo></foo>';
    }
}

And the component template:

<pre *ngIf="bodyText !== null"><code>{{ text }}</code></pre>

As you can see the <pre></pre> tag will dissapear as soon as the property text change to null. Then it will be rendered again with the new value to be highlighted.