Within my index.html file, I have the following script:
<script type="text/x-mathjax-config>
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
When I manually add a line of HTML statically in component.html, it correctly applies the formatting from the script (see image 1).
However, when I let Angular bind the HTML dynamically (see images 2 and 3), the script within the <script> tag is not applied, resulting in plain HTML being rendered. I've tried binding through [innerHTML] and setting an #ID.
How can I achieve the nice formatting seen in image 1 with a dynamic string?
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Request } from "./Request";
@Component({
selector: 'html-component',
templateUrl: './html.component.html',
styleUrls: ['./html.component.css'],
providers: [Request]
})
export class HtmlComponent implements OnInit {
questionString = '';
answerString = '';
currentQuestion;
type;
@ViewChild('questionId') questionId: ElementRef;
I update the inner HTML content here:
this.request.postHtml("openLink", result)
.then(response => {
this.questionId.nativeElement.innerHTML =
response._body.replace(/{/g, '{{\'{\'}}');
console.log(this.questionId.nativeElement.innerHTML);
this.questionString = response._body.replace(/{/g, '{{\'{\'}}');
I don't use a real template, as most of the HTML is contained in one large file.
HTML (again):
HTML Output:
I've also attempted placing the <script> before the [innerHTML] binding, but it doesn't change anything since the <script> is already included in the index.html (the parent of this HTML page).