CODEWITHSUNDEEP
angulardata-bindingcustom-data-attribute
ste2425
ste2425

Reputation: 4766

Angular 5.2.3 data-bind to data attribute with hyphen in name

Using Angular 5.2.3.

It is my understanding that this is valid HTML

<div data-automation-for="howdy"></div>

However when it try to data bind to it like this

data-automation-for="{{day.date | dateFormat:'MMMM'}}"

I get the following error

Can't bind to 'automation-for' since it isn't a known property of 'div'. ("<div style="display: inline-block" [ERROR ->]data-automation-for="{{dateContext | dateFormat:'MMMM'}}">")

Upon searching for this i found the following two potential solutions

attr.data-automation-for="{{day.date | dateFormat:'MMMM'}}"

and

[attr.data-automation-for]="day.date | dateFormat:'MMMM'"

However they both error too. It appears these solutions aren't handling the extra hyphens.

Now i realize i could be completely mistaken and extra hyphens are not valid but i haven't found anything stating that.

Thanks for any insight.

Upvotes: 1

Views: 1636

Answers (1)

Jens Habegger
Jens Habegger

Reputation: 5436

I created a minimal StackBlitz example for you.

Main take-away: You were probably misinterpreting the documentation of the date pipe. 

<div [attr.data-automation-for]="dateContext | date:'MMMM'">

Note: Interpolation (using a variable via {{varName}}) is only used outside of other HTML tags.

Upvotes: 2

Related Questions