Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 error: Can't bind to 'innerhtml' since it isn't a known native property

Using angular 2 to bind a raw html inside a DIV

Version: Angular 2 "2.0.0-rc.1"

References on index.html:

<script src="~/lib/ng/shim.min.js"></script>
<script src="~/lib/ng/zone.min.js"></script>
<script src="~/lib/ng/Reflect.js"></script>
<script src="~/lib/ng/Rx.umd.js"></script>
<script src="~/lib/ng/core.umd.js"></script>
<script src="~/lib/ng/common.umd.js"></script>
<script src="~/lib/ng/compiler.umd.js"></script>
<script src="~/lib/ng/platform-browser.umd.js"></script>
<script src="~/lib/ng/platform-browser-dynamic.umd.js"></script>

index HTML:

...

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

...

Javascript:

ng.platformBrowserDynamic.bootstrap(        
    ng.core
    .Component(
        selector: 'my-app',
        template: <div  [innerHTML]="name"></div>
    )
    .Class(
        constructor: function()
        {
            name = "<div>Testing</div>"
        }
    )
)

Error:

EXCEPTION: Template parse errors: Can't bind to 'innerhtml' since it isn't a known native property ("

# 1 {{ name }}

][innerhtml]="name"> "): QuestOperationComponent@4:8

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind to 'innerhtml' since it isn't a known native property ("

# 1 {{ name }}

][innerhtml]="name"> "): QuestOperationComponent@4:8

I already tried:

[innerHtml] 
[innerHTML] 
[inner-Html] 
[inner-html]
like image 930
Glauber A A Avatar asked Jun 15 '16 16:06

Glauber A A


1 Answers

This one worked for me

<div innerHTML="{{name}}"></div>.
like image 189
Aravindh Gopi Avatar answered Nov 15 '22 04:11

Aravindh Gopi