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.

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.

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'';
}

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.

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: [['$','$'], ['\\(','\\)']]}});