Google code Prettify code in Angular2 partially working

Question

I am trying to display code in html and prettify it using Google Code prettify. I am almost close to completion of my requirement, but when I try to externalize the file and pull code from it, it isn't working.

Here is my ts code snippet.

demoJavaCode: any;
demoJavaCodeFromFile: any;

ngOnInit() {
    this.demoJavaCode = 
      `<pre><xmp class="prettyprint">
         public class A {
             public static void main(String args[]) {
             }
         }
        </xmp></pre>`;
 }

ngAfterViewInit() { 
  PR.prettyPrint();
}`

In template, I am fetching it like this.

<p  [innerHtml] ="demoJavaCode | trustedHtml"></p>

It works well, the paragraph which has code in it is highlighted/prettified only when it is sanitized using trustedHTML pipe.

But when I just tried to externalize the code to an external file having the exact same code content it's not working.

Here is my ts snippet.

this._http.get("assets/java_code.txt").map(res => res.text()).subscribe(
      response => {
        this.demoJavaCodeFromFile = response;
      },
      error => {
        this.componentErrorMessage = error;
      },
      () => {
        console.log('File successfully loaded..');
      }
    );

What could be wrong here? Any pointers and suggestions would help.

Answer 1

You should call PR.prettyPrint(); inside the ngAfterViewChecked component lifecycle hook

take a look at this plnkr: https://plnkr.co/edit/wDJCKx3RjpJID2Nb6j2L?p=preview

here is the code from the plnkr:

//src/app.ts 
import {Component, NgModule, VERSION, AfterViewChecked} from '@angular/core'
import { FormsModule }   from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'
import { HttpModule } from '@angular/http';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="refresh()">refresh</button>
      <div [innerHtml]="code"></div>
    </div>
  `,
})
export class App implements AfterViewChecked {
  name:string;
  code: string;
  constructor(private http: Http) {
    this.name = `Angular! v${VERSION.full}`;
  }
  refresh(){
    this.http.get("javacode.html")
    .subscribe(
      res => {
        this.code = res._body;
      },
      ()=>{},
      ()=>{})

  }
  ngAfterViewChecked(){
      console.log('ngAfterViewChecked')
      PR.prettyPrint();
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule, FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
//--------------------------------------
//src/javacode.html
<pre class="prettyprint">
  public class Cube {

    int length;
    int breadth;
    int height;
    public int getVolume() {
        return (length * breadth * height);
    }
}
</pre>