angular 2 [innerHTML] render inside html (not working on angular 2 )

Question

i am using Angular 2 and i try to render the text which i have inside the variable action.render as html code:

<p *ngIf="action.isHtml">
      <div [innerHTML]="{{action.content}}"></div>                                               
</p>
<p *ngIf="!action.isHtml">
      {{action.content}}
</p>

the innerHTML doesn't work in my case. is there any other approach with Angular 2? (here is what i get )

this is my action.content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
            </title>
            <style type="text/css">
                .cs2654AE3A{text-align:left;text-indent:0pt;margin:0pt 0pt 0pt 0pt}
                .csC8F6D76{color:#000000;background-color:transparent;font-family:Calibri;font-size:11pt;font-weight:normal;font-style:normal;}
            </style>
        </head>
        <body>
            <p class="cs2654AE3A"><span class="csC8F6D76">New claim declaration by HD team 00015371</span></p></body>
    </html>

See my answer at http://stackoverflow.com/a/41089093/217408 about DomSanitizer — Günter Zöchbauer, Mar 31 '17 at 14:01
I see this line :
and it is looks like you trying to do double inerpolation. Try this :
. — Jviaches, Sep 25 '17 at 20:46

Vivek Doshi · Answer 1 · 2017-03-31T13:36:08.890

3

Change your code to this and try again :

<p *ngIf="action.isHtml">
      <div [innerHTML]="action.content"></div>                                               
</p>
<p *ngIf="!action.isHtml">
      {{action.content}}
</p>

You should use either innerHTML="{{action.content}}" or [innerHTML]="action.content" but not [innerHTML]="{{action.content}}"

edited Mar 31 '17 at 13:36

answered Mar 31 '17 at 13:35

Vivek Doshi

56,649
12
110
122

doesn't work i have already tried it. – kostas Mar 31 '17 at 13:35
Will you please provide action.content. – Vivek Doshi Mar 31 '17 at 13:36
i posted an answer since it was too long – kostas Mar 31 '17 at 13:55
Works fine, this resolve a similar bug – Cami Rodriguez Feb 05 '18 at 19:41
Also be careful, This code is valunarable against **Script Injection Attack** and should be **sanitized**. In short: `action.content` may contains some malicious injected script codes. – Rzassar May 11 '18 at 09:56

angular 2 [innerHTML] render inside html (not working on angular 2 )

1 Answers1