data-hover angular2 not working

Question

Angular doesn't recognize data-hover.

Can't bind to 'data-hover' since it isn't a known property of 'span'

I have tried span, div no luck. Existing page relies heavily on data-hover, so rewriting is not an option.

<a class="main-item" routerLink='{{ item?.url}}'>
    <span class="main-item-hover" data-hover="{{item?.label}}">{{item?.label}}</span>
</a>

This piece of code works perfectly without angular

EDIT :

.main-item-hover:before {
  content: attr(data-hover);
  font-weight: 600;
  position: absolute;
  top: 100%;
}

This is how data hover is used in css.

Ideas?

Are you looking for `title=`? – Z. Bagley Jul 16 '17 at 16:55 — Z. Bagley, Jul 16 '17 at 16:55

Andriy · Accepted Answer · 2017-07-16T17:19:15.913

1

try to rewrite your code using square brackets along with property binding as

<a class="main-item" [routerLink]="item?.url">
  <span class="main-item-hover" [attr.data-hover]="item?.label">
    {{ item?.label }}
  </span>
</a>

edited Jul 16 '17 at 17:19

answered Jul 16 '17 at 16:56

Andriy

that was the first thing i tried before posting, same thing [ERROR ->][data-hover]="item?.label">{{item?.label}} – SeaBiscuit Jul 16 '17 at 16:59
`attr` property binding should be added, I updated my original answer and added plunker with slightly different CSS, just to show CSS `content` – Andriy Jul 16 '17 at 17:20
i have totally forgotten about attr. part. I still am not sure when attr is needed and when not. Oh well thanks alot – SeaBiscuit Jul 16 '17 at 17:21
actually this answer (https://stackoverflow.com/questions/43386590/cant-bind-to-target-since-it-isnt-a-known-property-of-div#43386609) helped me to recall it, of course I upvoted @Aravind's answer as well :) – Andriy Jul 16 '17 at 17:25

1 Answers1