As highlighted in the blog post Guidance on Implementing MathJax in angular2 Using TypeScript
When utilizing data binding with Angular2 for rendering on the UI, it may be observed that MathJax text is not being rendered. This occurs because the string value needs to be re-rendered each time it changes.
A simple module example exists to address this issue, involving an event handler bound to trigger when the value changes.
import { Directive, ElementRef, OnChanges, Input } from "@angular/core";
declare var MathJax: {
Hub: {
Queue: (param: Object[]) => void;
};
};
@Directive({ selector: "[mathJax]" })
export class MJD implements OnChanges {
@Input("mathJax") private value: string = "";
constructor(private element: ElementRef) {}
ngOnChanges() {
this.element.nativeElement.innerHTML = this.value;
MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.element.nativeElement]);
}
}
In the HTML template file, the directive can be used as follows:
<div class="math-element" id="equation" [mathJax]="equationTexString"></div>
Additionally, remember to add the MJD directive to the component directive list:
@Component({
selector: "equation-component",
directives: [MJD],
})
export class EquationComponent {
private equationTexString: string = "";
}