Home | Math Display Experiments | Reveal MathJax Steps Within Angular.js

Page by Murray Bourne, IntMath.com. Last updated: 07 Jul 2019

Reveal MathJax Steps Within Angular.js

The problem

A reader in the MathJax Google group asked how to reveal equation steps in a MathJax aligned equation, one at a time, within an Angular framework. The issue he found was MathJax would "hang on" to previous lines each time it would create a new step, and it was working in reverse order (so each step would appear more than once, and each new block of equation lines appeared above the former block).

I'd never played with Angular before, so it seemed like a good excuse to learn something.

(Almost) working example

Any text here (below the math) doesn't jump around... (but you need to measure the height of the fully expanded math first, and indicate that height in your CSS for the "mathWrap" DIV).

The concept

The trick was to create a child scope and create the math in a placeholder div. A directive statement places the necessary Angular variable in the template. Then, for the next step, destroy that child scope (thus destroying the unwanted math), and create a new one.

Known Issues

1. I tried to hide the math div using $scope.hideMath = true; until MathJax had finished processing using $scope.hideMath = false; when MathJax.Hub.Startup.signal.​Interest said typesetting was done. But the problem was it would either hide the first step completely and then not work as expected subsequently (it would show the unprocessed math first for all subsequent steps), or would hide everything for every step. The signals are working corectly, but the behavior isn't. If anyone solves that one, let me know. (I've currently disabled hiding.)
2. The two calls to MathJax to typeset the thing are required. Leave either one out and it doesn't work properly. That seems funny to me.

The script