Angular 5 How to insert a string as a HTML element

Issue

I am getting response from server as string :

<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr><tr><td>12</td><td>3125</td><td>315</td><td>2554</td><td>5542</td><td>331255</td></tr></tbody></table>

How can i insert this in my page directly as a html element so that i can view a html table to users.

I am new to angular below is thing which i have tried :

i have created a variable in my componenet class as htmltable and tried to create a htmlelemnt like below

this.htmltable = document.createElement(serverresponse.htmltable)

but its not working .

also i have tried this way :

 <div class="dynamically_created_div unique_identifier" #d1></div>
    @ViewChild('d1') d1:ElementRef;
        this.renderer.appendChild(this.d1, serverresponse.htmltable);

but its not working. Please suggest me the correct way of doing this

Solution

You can create custom angular pipe as follows:

import { DomSanitizer } from '@angular/platform-browser'
import { PipeTransform, Pipe } from "@angular/core";

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

in HTML component,

 <div [innerHTML]="comments | safeHtml"></div>

Answered By - RameshD