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

6
votes

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]
1
angularangular2-templateangular2-directives
[innerHTML] is the correct syntax as described here. I tested it with r.c.3. I know you already tried, but just to be sure, can you try again with that syntax and update the error message? – Mono

1 Answers

2
votes

This one worked for me

<div innerHTML="{{name}}"></div>.