How to render HTML which is in array in angular

Question

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.

Note that the HTML in there is malformed (</td>td> - typo?) and incomplete (part of a HTML table). — schnaader
– 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
– Alok Mali, Commented Jun 18, 2019 at 6:06
Possible duplicate of Angular2 - Interpolate string with html — Joel Joseph
– Joel Joseph, Commented Jun 18, 2019 at 7:29

Nikola Stekovic · Accepted Answer · 2019-06-18 06:06:29Z

5

you should use [innerHTML] directive that comes 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>

answered Jun 18, 2019 at 6:06

Nikola Stekovic

6453 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kunal Dholiya Over a year ago

is it possible to give style to the array object and it will render at the front?

Nikola Stekovic Over a year ago

it is, you can have it as object that would follow up [ngStyle] directive like [ngStyle]="{'color': '#fff'}". This means that you could have in you object property style and have new object in it as style: {'color': '#fff'} so you can use it in your template like <div [innerHTML]="item.value_before" [ngStyle]="item.style"></div>. Hope that i explained it right, if not let me know in private or write a new question on stackoverflow.

Pramod kushwaha · Accepted Answer · 2019-06-18 06:27:14Z

2

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

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

answered Jun 18, 2019 at 6:27

Pramod kushwaha

4496 silver badges17 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-06-18 06:11:37Z

0

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>

answered Jun 18, 2019 at 6:11

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to render HTML which is in array in angular

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related