Angular Basics

Angular Property Binding

Property binding sets a DOM property from a component value using square brackets: [property]="expression". It binds to the live DOM property, not the static HTML attribute, so the value stays in sync as the component changes.

What is Property Binding in Angular?

Property Binding example

Binding properties and attributes

HTML

<img [src]="job.logoUrl" [alt]="job.company">
<button [disabled]="!form.valid">Apply</button>
<app-job-card [job]="selectedJob"></app-job-card>

<!-- attribute binding for things with no DOM property -->
<td [attr.colspan]="span">…</td>

<!-- class and style bindings -->
<div [class.featured]="job.isPromoted" [style.width.px]="barWidth"></div>

How this works

Without brackets the value is a literal string: src="job.logoUrl" would request a file with that name. With brackets the right-hand side is evaluated as a component expression.

Key points to remember

Use [attr.x] for ARIA attributes, colspan and anything without a matching DOM property.
[class.name] toggles a single class; [ngClass] handles several at once.
[style.prop.unit] lets you bind a number and supply the unit separately.

Common mistakes with Property Binding

Omitting the brackets and binding a literal string instead of a value.
Combining interpolation with brackets — [src]="{{ url }}" is invalid.

Angular Property Binding— Interview Questions & FAQs

What is the difference between property binding and interpolation?+

Interpolation inserts a value as text inside an element. Property binding sets a DOM property, so it can carry booleans, objects and arrays — which interpolation, being string-based, cannot.