Данные не обновляются при использовании директивы Angular2, работающей с highlight.js

Question

Я использовал пользовательскую директиву для использования highlight.js в Angular2 Typescript, упомянутом в этом оригинальном URL: highlight.js не работает с Angular 2

Но значение не меняется в блоке "код". Я хочу, чтобы значение обновлялось в блоке кода при нажатии кнопки.

Я пробовал и ngAfterViewChecked и ngAfterViewInit в HighlightCodeDirective.

Кто-нибудь может мне помочь с этой проблемой?

@Directive({
    selector: 'code[highlight]'
})
export class HighlightCodeDirective {
    constructor(private codeElement: ElementRef) {
    }
    ngAfterViewChecked() {
        hljs.highlightBlock(this.codeElement.nativeElement);
    }
}


@Component({
selector: "my-app",
template: `
  Hello!
  <button (click)=change()>change</button>

  <pre>
    <code highlight class="sql">
      {{test}}
    </code>
  </pre>

  <p>{{test}}</p>
  <pre>
    <code highlight class="sql">
      {{test}}
    </code>
  </pre>
`,
directives: [HighlightCodeDirective]
})
export class AppComponent{
  test:string = "select * from test";
  change(){
    this.test = "select * from test where name = 'test'";
  }
}

Вот демоверсия: https://plnkr.co/edit/31EgnsjOx2r1Sa2nNi76?p=preview