Custom attribute gives parsing error when using with an angular 2.0.0-beta.0

Question

I'm trying to use custom attribute with angular2 as following

 <a href="javascript:void(0)" title="{{inst.title}}" data-loc="{{inst.actionval}}">

which gives me following error

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

Possible duplicate of [Angular 2 data attributes](http://stackoverflow.com/questions/34542619/angular-2-data-attributes) — Mark Rajcok, Feb 20 '16 at 18:07

Pardeep Jain · Accepted Answer · 2016-05-19T10:02:54.607

102

Angular by default uses property binding but a doesn't have a property data-loc. To tell Angular explicitly to use attribute binding, use instead: try this one may work for you.

<a href="javascript:void(0)" title="{{inst.title}}" [attr.data-loc]="inst.actionval">

or

<a href="javascript:void(0)" title="{{inst.title}}" attr.data-loc="{{inst.actionval}}">

edited May 19 '16 at 10:02

answered Feb 20 '16 at 06:08

Pardeep Jain

78,495
36
155
210

Since the original user who asked did not respond, I would like to say that with the released version of angular 2 the first suggestion is the way to go. – Hazerd Nov 14 '16 at 15:53
ohh okay so should i remove the second opption ? – Pardeep Jain Nov 15 '16 at 05:33
No, that one works also. My bad, when I tried it I didn't remove the square brackets. Both options are viable. – Hazerd Nov 15 '16 at 08:57
1

Tks @PardeepJain – Ulrich Dohou Apr 26 '18 at 09:51

Custom attribute gives parsing error when using with an angular 2.0.0-beta.0

1 Answers1