I'm currently trying to render dynamic MathJax content:
<div mathjax #math>
$$Weight = {{ mass }} * {{ g }}$$
</div>
This works fine until I try to re-render after changing some of the variables. So for instance if I changed mass then I would expect the values in the HTML above to change also.
To do this I need to perform a MathJaxTypeset() call on the instance of the MathJax directive, so as per instructions on the ngx-mathjax github page:
I use viewchild to get the instances on the page...
@ViewChild('math', { static: false, read: MathJaxDirective }) mathsExpressions?: MathJaxDirective;
and then run MathJaxTypeset() on them when they need updating...
makeNewValues(): void {
this.mathsExpressions.MathJaxTypeset();
}
However this produces an error...
ERROR TypeError: Cannot read properties of undefined (reading 'MathJaxTypeset')
I am not experienced in the use and manipulation of directives, and so am unsure of how and why I get the error. I assume the problem is in viewchild if it is seemingly unable to find the instances to typeset.
Update
Here is a stackblitz using the newer module mathjax-angular. You will notice that there are three lines of the code in the template which display the mathjax styles values. The first two:
<div [mathjax]="displayString"></div>
<div [mathjax]>{{ displayString }}</div>
Both work at runtime, and look identical, but only the top one rerenders when the value is updated. This is less ideal because it means separating the content of the document into the .ts and .html files and then manually updating the strings with mathjax code when any of the values is updated.
The third offering:
<div [mathjax]>$$Random = {{ randomNumber }}$$</div>
Renders in my code but not on stackblitz - and there is no difference between the styles or the dependencies. Angular on SB is v12 and I am using v13 but that's the only difference. If this rendered properly it would be exactly what I want...
What I want is for the inline code in the HTML (the third line) to update when the values are updated.
Already Tried
Most of what is on SO seems to be AngularJS related or not specific to ngx-angular, but this thread on SO seems to be the same problem. The solution however didn't change anything for my own code.
app.module.ts
In my app.module.ts I have:
MathJaxModule.forRoot()