2

In Component.ts

this.innerHtmlValueData  = "<....>{{title}}<...>"

In HTML

<...[innerHTML]="innerHtmlValueData"></...>

I have also tried with sanitizer.bypassSecurityTrustHtml it is still not working. It doesn't show the title value,

PeS
  • 3,757
  • 3
  • 40
  • 51
durai
  • 64
  • 3
  • Welcome. Please show more code, some errors from log so that we can help. – PeS Sep 14 '18 at 03:24
  • Hi the thing is we have design studio in our application on that we can able to drag and drop components(text box,Form fields etc). Based on the Design we need to load HTML. That HTML also contains code like interpolation binding,and many angular fields and directives. when i try to use [innerHTML] property it is working for normal HTML manipulation(ie using B tag it displays bold content) but it is not working for angular code when try to display title variable value as {{title}} instead of displaying title it displays the raw data as "{{title}}" – durai Sep 14 '18 at 06:19
  • sample Code var content = "

    {{title}

    "
    Not only a variable binding we need the support of all the things in angular like angular property binding,style rendering etc.     – durai Sep 14 '18 at 06:24
  • I added question to render HTML by dynamic compiling https://stackoverflow.com/questions/52237258/dynamic-template-compilation-in-angular-6 but not get proper solutions – durai Sep 14 '18 at 06:26

1 Answers1

0

in HTML 

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

In Component.ts

title = "ERP"

innerHtmlValueData  = "<htmltag>"+this.title+"</htmltag>"

or 

innerHtmlValueData:string = `<span class="badge badge-secondary">${this.title}</span>`

try this

Bhumika Barad
  • 101
  • 1
  • 5
  • Hi thanks for your answer,Please Read my comments on the Question . we have two separate components one for design and one for preview.on design page the above html (innerHtmlValueData = ""+this.title+"" )is binded but the title value reside in preview component so in create comp HTML it will throw error title is undefined – durai Sep 14 '18 at 07:56
  • innerHtmlValueData:string = `${this.title}` use back quote – Bhumika Barad Sep 14 '18 at 10:04
  • you have two separate component then use @viewChildren. https://medium.com/@tkssharma/understanding-viewchildren-viewchild-contentchildren-and-contentchild-b16c9e0358e – Bhumika Barad Sep 14 '18 at 10:22
  • Hi thanks once again! By using ${this.title} we can bind the value inside [innerHTML]. But not only bindings we need Angular things like ngFor,ngIf and so On need to work but it will not supported in [innerHTML] ,so how can i solve this,please suggest some ideas. – durai Sep 14 '18 at 13:43
  • Hi, as per my experience and knowledge , use function binding https://stackblitz.com/edit/angular-wzjxtx i think it's not enough for you but as per my understanding i did this code. – Bhumika Barad Sep 17 '18 at 07:31
  • Your Idea is good for small Set of HTML but we have big content with many ngFor and ngIf configuring each of one is Difficult. – durai Sep 27 '18 at 11:35
  • dividing each part in one component and use it which component you want. https://angular.io/guide/template-syntax#property-binding , https://angular.io/guide/template-syntax#inputs-outputs – Bhumika Barad Sep 27 '18 at 11:49