Convert &lt;p&gt; to <p> and use to format html

Question

A web service is returning data to my app in this format (unfortunately I have no control over the server output):

<p> This is a paragraph </p>

When trying to display this data using innerHtml the result is as follows

<p>This is a paragraph</p>

How do I 'pass on' the formatting to the browser so it interprets the paragraph tag and displays it?

Stackoverflow interpreting the <p>:

This is a paragraph

---

A plunker to demonstrate https://plnkr.co/edit/BbAVrT8F1rJGZnJmov1g?p=preview, code also listed below.

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml] = "name">
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `&lt;p&gt;This is a paragraph&lt;/p&gt;`
  }
}

I have tried <script>decodeURI({{name}})</script> but that simply returns <".

I have also looked at other stack questions and tried a pipe to bypass the security of the html, which didn't work. Reading the Angular2 docs it sounds like that's not it's purpose. I also tried the style override, it failed as this is not a style, it's pure html:

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: string) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

Answer 1

I created this function based on @Dummy's post. It's inside of the component, and called from the html.

export class SomeComponent {
    public dummyElem = document.createElement('DIV');

...

  decode(text: string): string {    
    var ret:string = "";

    this.dummyElem.innerHTML = text;
    document.body.appendChild(this.dummyElem);
    ret = this.dummyElem.textContent; // just grap the decoded string which contains the desired HTML tags
    document.body.removeChild(this.dummyElem);

    return ret;
  }    
}

Calling html

<div [innerHtml]="decode(object.value)"></div>

Doesn't 'feel' very elegant or correct, but it works.

Answer 2

I would refer to a The parseFromString() method of the DOMParser interface more details can be found here

Whatever framework you r using lets assume that this.value = is a string contains '&ltp&gt' elements.First we need to convert it to a html using new DOMParser() and parseFromString method than we can refer to a document.body.firstChild.data which is a HTML string converted than we can easy add it as a child or use innerHTML to prepand it to a html element.

if (this.value && this.value.length) {
        let html = '';
        let parser = new DOMParser();
        let doc = parser.parseFromString(this.value, 'text/html');
        html = doc.body.firstChild.data;
        let target = this.template.querySelector('.converter');
        if (target) {
            target.innerHTML = html;
        }
    }