CODEWITHSUNDEEP
htmljsonangular
Krithik
Krithik

Reputation: 1

Angular 2 get json data in div tag

I'm New to Angular 2,working with json data, while processing with typescript, i get json data from the Object using {{ data | json }},instead of JSON Variable i need to get the data in <div> tag on my web page.Is there any solution available ?

Ex: If the data is in the following format:

{ type:"header",subtype:"h1",name:"FormName" }

I need it in the following format:

<h1>Form Name</h1>

Upvotes: 0

Views: 654

Answers (2)

NitinSingh
NitinSingh

Reputation: 2068

Suppose you retrieve entire form's content from a service as an array of objects, each one having a single element. Iterate over the array using
*ngFor(obj of arr)
var element = '<{{obj.subtype}}>{{obj.value}}'
formElement.append(element)

(this is just a stub to illustrate. This will create all types of elements, you just have to take care of different types of properties, like css)

Upvotes: 0

Jihoon Kwon
Jihoon Kwon

Reputation: 755

If I understand your question exactly, you could use innerHtml function in Angular2.

app.component.ts 

export class AppComponent implements {
constructor() {
}

data = { type:"header",subtype:"h1",name:"Formname" };
  htmlString=`<${this.data.subtype}>${this.data.name</${this.data.subtype}>`;}

app.component.html 

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

Upvotes: 2

Related Questions