angular 2 does not parse correctly html code

Issue

Trying to HTML code to view the resulting HTML using the innerHTML property, but as you can see in the example below, it doesn't. The HTML code is viewed as the HTML tags and only, instead of creating the elements it renders them as simple text.

https://codepen.io/Dralius/pen/OJzoZxm

@Component({
  selector: 'my-app',
  template: `
  <span [innerHTML]='working'> </span>
   <span [innerHTML]='notWorking'> </span>
  `
})
class AppComponent {  
  working="<h1>hello world angular 6</h1>";
  notWorking='&lt;p&gt; Random Text &lt;/p&gt;'
  constructor() {
    // TODO: Define your Angular component implementation
  }
}

Solution

an idea can be to parse the notWorking string into valid html with domparser (for sample) before inject it in innerHTML

https://codepen.io/jeremy-denis/pen/rNpZKzO?editors=1111

const { Component, VERSION } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  <span [innerHTML]='working'> </span>
   <span [innerHTML]='notWorking'> </span>
  `
})
class AppComponent {  
  working="<h1>hello world angular 6</h1>";
  notWorking='&lt;p&gt; Random Text &lt;/p&gt;'
  constructor() { 
    this.notWorking =  new DOMParser().parseFromString(this.notWorking, 'text/html').body.innerText;
  }
}

Answered By - jeremy-denis