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

angular angular2-template
Akhilesh Kumar picture Akhilesh Kumar · Feb 20, 2016 · Viewed 18.2k times · Source

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

Answer

Pardeep Jain picture Pardeep Jain · Feb 20, 2016

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}}">

Related questions

Angular HTML binding

I am writing an Angular application and I have an HTML response I want to display. How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML characters (of course). I need somehow to …

Read More
OrderBy pipe issue

I'm not able to translate this code from Angualr 1 to Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" This is what i've done following the Thierry Templier's answer: Component template: *ngFor="#todo of todos | sort" Component code: @Component({ selector: 'my-app', templateUrl: "./…

Read More
Angular2 disable button

I know that in angular2 I can disable a button with the [disable] attribute, for example: <button [disabled]="!isValid" (click)="onConfirm()">Confirm</button> but can I do it using [ngClass] or [ngStyle] ? Like so: <button […

Read More