Angular 2.0 and Mathjax not working well

Question

I pieced together a semi working edition of mathjax with angular 2.0, but it is breaking in a manner I can not quite grasp. I have added a plunkr below to clearly demonstrate the situation.

In my code (not the plunkr) this is my relevant html:

<textarea
    #editorArea
    ngDefaultControl
    spellcheck="false"
    class="editor"
    [(ngModel)]='assignment.content.text'
    (keyup)="updateResult()"
    [ngStyle]="{'height' : formatDimension(editorDimensions.height), 'padding' : formatDimension(editorDimensions.padding)}
"></textarea>

<div class="result" #result>{{ editorArea.value }}</div>

and this is the relevant update function triggered from the HTML:

@ViewChild('result')     result     : ElementRef;

updateResult() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.result.nativeElement]);
}

Finally this is my mathJax configuration:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

http://plnkr.co/edit/lEJZZaxKUYxFGdLtWW7Z?p=preview

Answer 1

It seems like the main question here is how to repeatedly render the contents of the <textarea> into a separate area of the page using MathJax. This is covered in a simple case in the Modifying Math on the Page documentation .

Basically you have two options:

Option 1 Keep ahold of the rendered math element and then use the Text function to re-render with a new math string (Note: this requires that the whole textarea is one big math string, not normal text with math strings interspersed) Plunker :

HTML :

<div id="result">$ $ <!-- empty mathstring as placeholder -->

hello-mathjax.ts (portion):

ngOnInit() {
  var self = this;

  // callback function saves the rendered element, so it can
  // be re-rendered on update with the "Text" function.

  MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"result"],
    function () {self.resultElement = MathJax.Hub.getAllJax("result")[0]; 
      self.updateResult();
      }
  );

}

updateResult () {
  // re-render the same element with the value from the textarea
  MathJax.Hub.Queue(["Text",this.resultElement,this.inputValue]);
}        
updateResult () {
  MathJax.Hub.Queue(["Text",this.resultElement,this.inputValue]);
}

Option 2 Wipe out the renderd div every time and completely re-render the contents of the textarea. (This is the way to go if the textarea will contain a mix of mathstrings and regular text) Plunker :

HTML:

<div id="result"></div> <!-- No placeholder math string needed -->

hello-mathjax.ts (portion):

ngOnInit() {
  var self = this;
  MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"result"],
    function () { 
      self.updateResult();
      }
  );
}

updateResult () {
  var resultDiv = document.getElementById("result");
  // Replace the rendered content entirely
  // with the bare text from the textarea.
  resultDiv.innerHTML = this.inputValue;
  // Rerender the entire resultDiv
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"result"]);
}

This plunker demonstrates rendering a <textarea> that contains a mix of non-math and math statements (eg test test $\\frac 12$ )

This Plunker demonstrates rendering a <textarea> that should be interpreted entirely as math statements (eg \\frac {11}2 )