davidshen84 / ngx-mathjax

MathJax + Angular

ngx-mathjax

Integrate MathJax with Angular.

NOTE: The MathJax v3 API is not fully componentized and some API features rely on the global library state. I found it is very difficult to integrate the v3 API with Angular. Therefore, the plan to adopt to the new API is on hold.

Feature

• Dynamically load MathJax library to your web application.
• Simple typesetting using Angular directive.
• Dynamic typesetting using expressions.

Install

npm install ngx-mathjax

Configure the module

Load the module in the @NgModule class of the application. You need to pass a ModuleConfiguration instance to the config method to configure the module.

Example

When importing in the root module, the module should be configured with .forRoot method.

import {NgModule} from '@angular/core';
import {AppComponent} from './src/app/app.component';
import {MathJaxModule} from './src/app/math-jax/math-jax.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MathJaxModule.forRoot({
      version: '2.7.5',
      config: 'TeX-AMS_HTML',
      hostname: 'cdnjs.cloudflare.com',
      mathjaxconfigobject : {
          'HTML-CSS': {
            styles: {
              '.MathJax_Display': {
                'background-color': 'yellow',
              },
            },
          },
        },
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• version is the MathJax release version.
• config is the MathJax predefined configuration name.
• hostname is the MathJax CDN hostname.
• mathjaxconfigobject is the MathJax Configuration Object allowing you to directly influence the Typesetting and other options (which you can read more about at 6).

When importing in a child module, the module must be configured to re-use the same module instance as the root module. So simply configure the module with the .forChild method.

import {MathJaxModule} from './src/app/math-jax/math-jax.module';

...
imports: [
  MathJaxModule.forChild()
]
...

Typeset an element

Add the mathjax directive to elements which you want to apply MathJax typesetting on load.

<div>normal text</div>

<div mathjax>mathjax typesetting
$$
x = 1
$$

\( y = 2 \)
</div>

Typesetting using expression

The Jax elements will be updated when the corresponding expression value is changed. The correspondence principle between the expression and the Jax element is by order.

<div [mathjax]="[exp1, exp2]">

MathJax Expression 1: \( {{ '{}' }} \)
MathJax Expression 2: \( {{ '{}' }} \)
</div>

Insert the {} to the place you want, then surround it with a pair of MathJax delimiter.

You need to escape it in Angular template.

Manually trigger MathJax typesetting

You can use the MathJaxDirective.MathJaxTypeset() method to trigger the typesetting when you want. The steps are:

• Use ViewChild and its read property to get a reference to the MathJaxDirective instance
• Call instance.MathJaxTypeset()

Adding a callback

You can specify a callback function to be called when the rendering is finished

component.ts

export class yourComponent implements OnInit {
  callback = function () {
      console.log("Callback function called!")
    }
}

template or html

<div mathjax (mathjax-callback)="callback()">
    \\( E = mc^2 \\)
</div>

TODO

empty

ngx-mathjax's Issues

Using mathjax locally

Is it possible to somehow configure this package to load Mathjax locally?

'mathjaxconfigobject' does not exist in type 'ModuleConfiguration'

Argument of type '{ version: string; config: string; hostname: string; mathjaxconfigobject: {}; }' is not assignable to parameter of type 'ModuleConfiguration'.
  Object literal may only specify known properties, and 'mathjaxconfigobject' does not exist in type 'ModuleConfiguration'.ts(2345)

As seen in types

export declare class ModuleConfiguration {
    /**
     * The version of the MathJax library.
     */
    version: string;
    /**
     * The config name of the MathJax library.
     * Please check the MathJax [documentation](https://docs.mathjax.org/en/latest/config-files.html) for all the configuration names.
     */
    config: string;
    /**
     * MathJax CDN hostname. Please check [here](https://docs.mathjax.org/en/latest/start.html#mathjax-cdn) for available CDN servers.
     */
    hostname: string;
}

need to add definition for mathjaxconfigobject.

EDIT:

I cloned your repo, and mathjaxconfigobject is defined in ModuleConfiguration. I think you just need to publish.

EDIT2:
It's already in this merge.
bd884dd

MathJaxModule loaded in child module won't work

MathJaxModule loaded in a child module should reuse the module instance as the root module.

MathJax throws error while rendering the expressions.

While the MathJax engine is rendering the expression and the user switch away from the current component, the engine will throw an error because the dependent HTML elements are removed.

Upgrade to MathJax v3

v3 has been released: https://docs.mathjax.org/en/v3.0-latest/index.html

Review this example: https://mathjax.github.io/MathJax-demos-web/input-tex2chtml.html

Allow manually trigger MathJax typeset

When used in conjunction with other components that would modify their content, e.g. a markdown typesetting component, MathJax typesetting should happen the last.

MathMl format doesn't work

I can't make this to work

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac>
          <mn>1</mn><mn>2</mn>
   </mfrac>
</math>

even when I setup this configuration

  MathJaxModule.forRoot({
      version: '2.7.7',
      config: 'TeX-MML-AM_HTMLorMML',
      hostname: 'cdnjs.cloudflare.com'
    }),

Manually trigger MathJax typesetting

I am trying to load mathjax like this

<div mathjax [innerHTML]="mmlText | safeHtml: 'html'"></div>

It renders fine for the first load but when mmlText values changes then it does not render.

I have tried trigger MathJax typesetting after changing the variable value but it does not work.
@ViewChild(MathJaxDirective, { static: false }) private questionStatement: MathJaxDirective; ... changeVar(){ this.mmlText = 'new mml tags here'; this.questionStatement.MathJaxTypeset(); }

MathJax typesetting is not triggered correctly

How to add config data

Hi,

great software, works really nice in my webapp. Just one thing: do you know how I can add some config options to the mathjax call? I would like to set CSS output options of the css class "MathJax_Display:" to "margin: 0em".

Best.

Hide status bar

Check this wiki and hide the typesetting message status bar.