Display html element from JSON object on ionic App

Question

I have been trying to embed html element from JSON object, and It is currently displaying the html as raw code instead.

Can someone please help me ?

detail.ts

 this.questionsData[i].question_type.title = "<ion-input type=\"text\" placeholder=\"Short answer\"></ion-input>";

detail.html

<ion-item  *ngFor="let question of questionsData">
      {{question.title}}
      <br>
      Text : {{question.question_type.title}}
      <br>
     <div   [innerHTML]="question.question_type.title">
    </div>
</ion-item>

Isn't it should be input box under the text : , anyone know why it's not rendered ?

Thanks

Sathyajith · Accepted Answer · 2017-06-15 04:42:47Z

1

InnerHtml will only help to render pure html code on run time, you can't use ionic components to render dynamically using innerhtml. I think you need to use dynamic component loader feature in angular here. You can refer this link on use cases of this feature https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36

answered Jun 15, 2017 at 4:42

Sathyajith

4,0843 gold badges18 silver badges28 bronze badges

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

Comments

art-fan-vikram · Accepted Answer · 2017-06-15 09:48:39Z

0

Your approach needs to change, do not include html tags in component block, instead add parameters as json data and set it at component. Then you can interpolate the tags in the template view. Ex:

at the component:

this.inputDataArray = [{"title":"What cartoon do you like to watch?", "name":"inp1","placeholder":"short answer"},{"title":"What movie do you like to watch?", "name":"inp2","placeholder":"short answer"}];

at the view:

       <ion-item  *ngFor="let question of inputDataArray">
          {{question.title}}
          <br>
          Text : <input name={{question.name}} placeholder={{question.placeholder}} />
          <br>

    </ion-item>

Its just a reference, Hope it helps

answered Jun 15, 2017 at 9:48

art-fan-vikram

3152 silver badges12 bronze badges

2 Comments

damniatx Over a year ago

Thank you so much, this approach much cleaner for me, I also use *ngIf now, so the templating is done on html file, not on ts file

art-fan-vikram Over a year ago

Glad to hear that :)

Everson Rafael · Accepted Answer · 2020-10-15 03:07:57Z

0

This worked for me.

<div [innerHTML]="data.text"></div>

answered Oct 15, 2020 at 3:07

Everson Rafael

2,0933 gold badges20 silver badges21 bronze badges

Collectives™ on Stack Overflow

Display html element from JSON object on ionic App

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related