npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-mathjax

v0.0.13

Published

Add MathJax typesetting to Angular application.

Downloads

829

Readme

ngx-mathjax CircleCI

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

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

TODO

empty