Why sometimes we need [attr.] prefix for binding

Question

When binding in general we only need to add []

Working example:

<input [type]="myInputType" [(ngModel)]="myValue" />

But sometimes its is mandatory to use [attr.]

Example where [attr.] is mandatory:

<svg>
    <path [attr.fill]="part.color[attr.d]="part.d"
    [attr.transform]="part.transform"></path>
</svg>

I cannot determine if I need or not (only empirically by actually trying it), which is disturbing. What is the rule?

Have you read the docs? https://angular.io/guide/template-syntax#binding-syntax-an-overview — jonrsharpe, Oct 29 '17 at 14:14
Thank for the link. That answer partially., but my question is not answer by this doc. I was on purpose seeking what is the difference between property and attribute from angular point of view. That is not so obvious. — David Faure, Oct 29 '17 at 14:46

score 2 · Accepted Answer · answered Oct 29 '17 at 14:09

2

Without attr. Angular will bind to a property. A property isn't available in the DOM for CSS or querySelector.

Some properties are reflected to attributes by the element itself, which again makes it available for CSS or querying (class, disabled, ...).

If there is no property with that name, you can only bind to an attribute. For that Angular requires attr.

answered Oct 29 '17 at 14:09

1

Just adding to the answer, that is the list of which is what: https://www.w3.org/TR/SVGTiny12/attributeTable.html – David Faure Oct 29 '17 at 15:49

1 Answers1