HTML table string to DOM element

I am new to Angular 4 (and html as well) . I have a c# datatable object and I want to present it in an Angular application. So I turned this datatable to an HTML string such as :

<table class="table table - striped">
            <tr><td>Name</td><td>BI</td><td>Run Time</td><td>Missing</td><td>Stale</td><td>Jump</td></tr>
            <tr><td>something</td><td>223</td><td>4/10/2018 7:05:07 AM</td><td>0</td><td>1</td><td>0</td></tr>

        </table>

and now I try to understand how to dynamically integrate this into my HTML file. What kind of binding should I use?

Solution

in your component's HTML add a div as:

<div [innerHTML]="tableHTML"></div>

In component declare a variable and update this value whenever you get updated HTML string of table. It can be done as:

tableHTML: any;

onAfterViewInit(){ 
  tableHTML = <updated HTML string> // tableHTML should be updated whenever you are getting data from back-end.
}