I have a array in which one of the object contains HTML element. I wanted to render it in angular.

This is the array:

{
name: "rules", 
key: "rules", 
value_before: "<tr><td>revisit_in_some_days</td><td>less_then</td>td>r.input_data</td>"
}

I've tried multi for loops for angular.

I want table of the response in angular frontened.

I have a array in which one of the object contains HTML element. I wanted to render it in angular.

This is the array:

{
name: "rules", 
key: "rules", 
value_before: "<tr><td>revisit_in_some_days</td><td>less_then</td>td>r.input_data</td>"
}

I've tried multi for loops for angular.

I want table of the response in angular frontened.

• javascript
• arrays
• json
• angular

• Note that the HTML in there is malformed (</td>td> - typo?) and inplete (part of a HTML table). – schnaader Commented Jun 18, 2019 at 6:05
• you have typing mistakes near less_then</td>. unopened td tag. and missing closing tr tag – Alok Mali Commented Jun 18, 2019 at 6:06
• Yes, It is there. – Kunal Dholiya Commented Jun 18, 2019 at 6:07
• Possible duplicate of Angular2 - Interpolate string with html – Joel Joseph Commented Jun 18, 2019 at 7:29

3 Answers 3

you should use [innerHTML] directive that es with angular. Usage:

data = [
  {
    value_before: '<div>some content</div>'
  },
  {
    value_before: '<div>some content1</div>'
  }
];

in your .html

<div *ngFor="let item of data">
  <div [innerHTML]="item.value_before"></div>
</div>

you should use [innerHTML] directive that es with angular by default. Like:

<ul><li *ngFor="let res of trackLogList[key]" [innerHTML]="res"></li></ul>

Assuming you will be placing the HTML inside a table,you can use[innerHtml] in table

<div *ngFor="let item of yourArray">
  <table [innerHTML]="item.value_before"></table>
</div>