CODEWITHSUNDEEP
javascriptjsonangulardom
user2900572
user2900572

Reputation: 621

How to parse json data as DOM content using angular?

I want to create a custom table using angular.. In that I am passing columns as an array. In table, columns contain text, image, URL, icons.. Is it possible to dynamically send custom html for each column? I tried sending html from column definition. But instead of parsing the html it is displayed as text like <p>sample text</p> .. How to parse json data to DOM in html.

  columns = [
    {
      name: 'column1',
      sort: 'asc',
      propertyName: 'name',
      dragDisabled: false,
      type: 'string',
      isCustomColumn : true,
      columnTemplate:'<p>lll</p>'
 }]


in html ,
{{cell['columnTemplate']}}  --> just display the data

If i pass'<span *ngIf="element.state === \'run\'" class="iconMdsp ok black has-color-success" ></span>'to columnTemplate, it has to display the icon only only if any of table record(element) has state 'run'.. after parsing I want check the condition for ngIf but using innerhtml removes this *ngIf condition. How to retain this?

Here in column array, user can pass <a> or <img> or <span>any html piece of code, that has to be added in DOM in runtime and display that.

Javascript code added in html is removed by angular in runtime. Is there a way to send custom columns in angular?

Upvotes: 0

Views: 178

Answers (1)

RezKesh
RezKesh

Reputation: 2942

In html do the following when you want to show the column content:

<span [innerHTML]="cell['columnTemplate']"></span>

It parses the html content and it's XSS safe.

Upvotes: 1

Related Questions