ngx-mathjax [![CircleCI][1]][2]

Integrate [MathJax][3] with [Angular][4].

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][5] 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.

$3

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

`typescript
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'
})
],
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.

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.

`typescript
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.

`html



`

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.

`html



`

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()`

TODO

empty

[1]: https://circleci.com/gh/davidshen84/ngx-mathjax.svg?style=svg
[2]: https://circleci.com/gh/davidshen84/ngx-mathjax
[3]: https://www.mathjax.org/
[4]: https://angular.io/
[5]: https://github.com/davidshen84/ngx-mathjax/issues/7