Angular › Data Binding

How does attribute binding differ from property binding, and when do you actually need to use it?

Intermediate

Answer

Property binding sets a property directly on the underlying DOM element object, which works for most common cases. Attribute binding, using the attr prefix, is needed specifically for HTML attributes that do not have a corresponding DOM property, such as aria attributes or custom data attributes.

<!-- Property binding, works for most standard properties -->
<img [src]="imageUrl" />

<!-- Attribute binding, needed for attributes with no matching property -->
<td [attr.colspan]="columnSpan"></td>

Real-world example A data table dynamically sets how many columns a cell should span using attribute binding, since colspan does not have a direct matching JavaScript property the way src does on an image element.

Common follow-ups: How do you know whether a specific HTML attribute needs attr binding instead of regular property binding?;What happens if you try to use regular property binding on something like aria-expanded?

Components & Templates;Accessibility (a11y) in Angular