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

Answer 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