This script is in my index.html's :

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

```

If I write a line of html **statically** in the component.html, it correctly applies the formatting from a script. (1) in image.

However, once I let angular bind it, (2) and (3) in image, the script in the is not applied and the result is that the html is rendered as plain html. I tried binding it through [innerHTML] and setting an #ID

![Here is the three methods that I have tried. Only static HTML applies correct format](https://i.stack.imgur.com/GRdIz.png)

How can I get the nice formatting in (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 set the value of the inner html 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 dont have a real template. Its mainly in one big HTML file.

HTML (again):
![enter image description here](https://i.stack.imgur.com/Hi4WX.png)

HTML Output:
![enter image description here](https://i.stack.imgur.com/Mzexc.png)

And I have tried placing the before the [innerHTML] binding. It doesnt change anything since I've already included the in the index.html (parent of this html page)