How to get Mathjax working with Angular2?

Question

Has anyone gotten Mathjax working with Angular2 ?

Plunkr example created :- http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview

From some Angular1 examples I saw it looks like a directive is needed to call MathJax.Hub.Queue, but I suspect it will take me quite a while to get the Angular 2 syntax right, so I wondered if anyone has already done it ?

e.g the following is an Angular 1 example. https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

And the mathjax syntax is here :- https://docs.mathjax.org/en/v1.1-latest/typeset.html

Trying to do something similar in Angular2.

UPDATE - the following works, thanks to Thierry.

Component:-

import {Component, OnInit} from 'angular2/core';
import {MathJaxDirective} from './mathjax.directive';

@Component({
  selector: 'hello-mathjax',
  templateUrl: 'app/hello_mathjax.html',
  directives: [MathJaxDirective]
})
export class HelloMathjax {
  fractionString: string = 'Inside Angular one half = $\\frac 12$';
  index: number = 3;

    ngOnInit() {
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathJax"]);
    }

    update () {
      this.fractionString = 'Inside Angular one third = $\\frac 1'+this.index+'$';
      this.index++;
    }

}

Directive:-

import {Directive, ElementRef, Input} from 'angular2/core';
@Directive({
    selector: '[MathJax]'
})
export class MathJaxDirective {
    @Input('MathJax') fractionString: string;

    constructor(private el: ElementRef) {
    }

    ngOnChanges() {
      console.log('>> ngOnChanges');
       this.el.nativeElement.style.backgroundColor = 'yellow';
       this.el.nativeElement.innerHTML = this.fractionString;
       MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement]);
    }
}

Still not sure why I need to queue the re-render in both places.

Preliminaries

The plunkr above now initializes correctly and Angular displays the MathJax correctly, but still not working properly on data updates (click on plunkr button to see). Any ideas ? – Preliminaries

Answer 1

I would implement this way with an input to get the specified expression:

import {Directive, ElementRef, Input} from 'angular2/core';
@Directive({
    selector: '[MathJax]'
})
export class MathJaxDirective {
    @Input(' MathJax')
    texExpression:string;

    constructor(private el: ElementRef) {
    }

    ngOnChanges() {
       this.el.nativeElement.innerHTML = this.texExpression;
       MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.el.nativeElement]);
    }
}

And use this way:

<textarea #txt></textarea>
<span [MathJax]="txt.value"></span>

See this plunkr: http://plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview.

Arran

Hi Thierry, would be interested to see your working example. Mine above still has "wierdness" when the data updates. Check the plunkr and click the button two times :) – Preliminaries

the ngOnChanges will only be called when a binding is updated. That's why I used an @Input... – Arran

I have it working with an @input triggering ngOnChange but the results are still not as expected. The old 1/2 is not replaced by the new 1/3 as expected, but both are shown. – Preliminaries

I updated your plunkr to make it work with the solution I proposed: plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview. – Arran

Works great. I needed to uncomment the ngOnInit command so it initializes OK. Thanks very much for your help ! – Preliminaries

I tried other expressions and they didn't work. Try this one: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ – Dalessandro

It appears that this solution won't transpile anymore. I worked around that with eval('MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.el.nativeElement])'); – Lope

Answer 2

Based on this question, I started the development of an open source project to typeset TeX math expressions with Angular. The project is on https://github.com/garciparedes/ng-katex.

You can install the module with:

npm install ng-katex --save

To add the module to your proyect add the KatexModule to import's field of your parent module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { KatexModule } from 'ng-katex';

@NgModule({
  imports: [BrowserModule, KatexModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

And then you can use it as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ng-katex [equation]="equation">`
})
export class AppComponent {
  equation: string = ''\sum_{i=1}^nx_i'';
}

Marrs

Answer 3

Used Mathjax in my project in Angular 2 as follows:

setTimeout(function () { MathJax.Hub.Queue(["Typeset", MathJax.Hub]);}, 5);

as the queue runs asynchronously, the setTimeout ensures the math rendering process happens after a certain point of time.

Nadabas

Answer 4

The problem is that template generator of angular 2 looking for end of file char '{' or finds something unexpected inside the html file at the end of file(EOF).

In order to be able to use MathJax with Angular 2 template generator:

<h1>example not working = $$ 2^{x + 2 } $$</h1>

<h1>example working = $$ 2^{{ '{' }} x + 2 {{ '}' }} $$</h1>

Just use {{ '{' }} or {{ '}' }} , instead of simple '{' inside the html tags.

Dont forget to add this to your index.html tags :

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

Donaugh