Interpolation and Property Binding

Angular templates stay in sync with the component class automatically — you don't manually update the DOM when data changes, you just change a property and let Angular figure out what needs to re-render. The two most basic ways to connect a template to that data are interpolation and property binding.

Interpolation

<h1>{{ title }}</h1>
<p>You have {{ unreadCount }} unread messages.</p>
<p>Total: {{ price * quantity }}</p>

Double curly braces evaluate a JavaScript-like expression and insert the result as text. These expressions can read properties, do simple arithmetic, or call a method — but they're meant to be small and side-effect-free. If an expression is doing real work (formatting, filtering, heavy computation), that logic belongs in the component class or a pipe, not inline in the template.

Property binding

Interpolation only produces text. To set an element's actual DOM property — whether a button is disabled, what an image's src is, whether an input is read-only — you bind to the property directly with square brackets:

<img [src]="avatarUrl" [alt]="userName" />
<button [disabled]="isSaving">Save</button>
<input [value]="searchTerm" />

export class ProfileComponent {
  avatarUrl = '/images/ada.png';
  userName = 'Ada Lovelace';
  isSaving = false;
  searchTerm = '';
}

[disabled]="isSaving" binds the button's disabled property to the isSaving class property — whenever isSaving becomes true, Angular updates the real DOM property, and the button becomes unclickable. This is different from writing plain disabled="isSaving", which would set the attribute to the literal string "isSaving" and disable the button unconditionally.

Interpolation is property binding, in disguise

{{ title }} inside a tag's text content is actually shorthand for binding to that element's textContent-like property. The two syntaxes below produce the same result:

<span>{{ title }}</span>
<span [textContent]="title"></span>

In practice you'll almost always reach for {{ }} for text and [ ] for everything else (attributes that aren't plain text, booleans, objects), but it's worth knowing they're two views of the same underlying mechanism — Angular reading a value off your component and pushing it into the DOM.

A common mixup

Square brackets bind to a property, not an attribute — usually the same name, but not always. class and className are a frequent source of confusion, which is part of why Angular gives class its own dedicated binding syntax, covered alongside ngClass in the attribute directives lesson.