title: Latex equations with Angular4
body: <p>I want to display equations in LaTeX and render them clientside. Those equations have variables that must be changed. So far, I've only found MathJax but it doesn't update values when they change. There are examples like <a href="http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview" rel="noreferrer">http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview</a> where it does change live, but that's from Angular2 and has thing weird line in it 
  <code>MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement]);</code> that leaves me with an error (because I can't find the MathJax variable). ng-katex doesn't work either because it doesn't show up in my ng-modules folder and it has weird output.</p>
  
  <p>MathJax itself works perfectly, except when you change something in the DOM</p>
  
  <p>E.g:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-test',
    template: '
    &lt;button (click)="decrDenumerator()"&gt;-&lt;/button&gt;
    Frac: {{frac}}
    &lt;button (click)="incrDenumerator()"&gt;+&lt;/button&gt;',
    styleUrls: ['./test.component.sass']
  })
  export class TestComponent implements OnInit {
    denumerator = 1;
    frac = '$\\frac{1}{' + this.denumerator + '}$';
  
    constructor() {
    }
  
    ngOnInit() {
    }
    incrDenumerator() {
      this.denumerator = Math.min(10, this.denumerator + 1);
      this.frac = '$\\frac{1}{' + this.denumerator + '}$';
    }
  
    decrDenumerator() {
      this.denumerator = Math.max(1, this.denumerator - 1);
      this.frac = '$\\frac{1}{' + this.denumerator + '}$';
    }
  }
  </code></pre>
  
  <p>When clicking on one of those buttons, it will only show it as text, while the first generated output from MathJax will be next to it.</p>
  
  <p>How can I make MathJax notice these changes and act accordingly? Thank you very much.</p>