html 5 data-* syntax cannot bind value in angular 2?

Question

I have an object array like this

Heros=[{
  heroName:"card1",
  heroType:"type1",
  heroHtml:"<p>card 1</p>"
}, 
{
  heroName:"card2",
  heroType:"type2",
  heroHtml:"<p>card 2</p>"
}
]

and I want to display it in my html page use like this

<div *ng-for="#hero of heros" data-hero-type="hero.heroType" [inner-html]="hero.heroHtml"></div>

can see a Plunker here.

why the data-component-type cannot get right value? If this is forbidden or not recommanded, what else solution can be used to bind value to html 5 custom attribute?

Answer 1

That's because data-hero-type is not a div's property, but an attribute, so to make it work you have to use

[attr.data-hero-type]="hero.heroType"

See this issue for reference #5014

And you are good to go ;)