Interpolation and Property Binding

Angular templates extend HTML with binding syntax that connects the DOM to your component class. The two most fundamental forms are interpolation — which renders a value as text — and property binding — which sets a DOM property to a value.

Interpolation: [object Object]

Double curly braces render a JavaScript expression as text inside the HTML:

<h3>{{ movie.title }}</h3>
<p>Released: {{ movie.release_date }}</p>
<p>Rating: {{ movie.vote_average.toFixed(1) }}</p>

The expression inside {{ }} is evaluated in the context of the component class. You can use any public property, method call, or simple expression — but keep templates readable by avoiding complex logic inside {{ }}. Move complex calculations into the component class.

Expressions can call methods:

movie-card.ts

get year(): string {
  return this.movie.release_date?.slice(0, 4) ?? '—';
}

<span>{{ year }}</span>

This is cleaner than putting the logic in the template.

Property binding: [property]

Square brackets bind a DOM property to a component class value. The difference from {{ }} is that property binding sets a DOM property, not text content:

<img [src]="posterUrl" [alt]="movie.title" />

Here, posterUrl is a property on the class:

get posterUrl(): string {
  return this.movie.poster_path
    ? `https://image.tmdb.org/t/p/w500${this.movie.poster_path}`
    : '/no-poster.svg';
}

The [src] binding sets img.src directly on the DOM element. When posterUrl changes, Angular updates img.src automatically.

Interpolation vs. property binding

Use {{ }} for text content — things that appear as text inside elements:

<h3>{{ movie.title }}</h3>   ✓ text content

Use [property] for DOM properties and attributes — things that go in HTML attribute positions:

<img [src]="posterUrl" />    ✓ DOM property
<img src="{{ posterUrl }}" /> ✓ also works, but [src] is preferred

For most attributes, [attr] and {{ }} in the attribute position are equivalent. But there are differences with boolean attributes and properties that do not map cleanly to attributes — [disabled], [checked], [value]. For those, always use property binding.

Class and style bindings

Two special shorthands are useful for dynamic classes and styles:

<!-- add 'active' class if isActive is true -->
<button [class.active]="isActive">Click me</button>

<!-- bind multiple classes based on an object -->
<div [ngClass]="{ 'card--saved': isInWatchlist, 'card--loading': loading }">

<!-- set a specific style property -->
<div [style.opacity]="loading ? 0.5 : 1">

In CinemaVault, MovieCard uses [class.saved] to show a visual indicator when a movie is in the watchlist.

Exercise

1. In your practice project, give MovieCard these properties:

   movie = { title: 'Inception', rating: 8.8, year: 2010 };
   posterUrl = 'https://placehold.co/200x300?text=Poster';

2. In the template, display the title with {{ }}, the rating rounded to one decimal, and the year.
3. Add an <img> that uses [src]="posterUrl" and [alt]="movie.title".
4. Add a property isHighRated = this.movie.rating > 8 and use [class.highlight]="isHighRated" on the card div.
5. Define .highlight { border: 2px solid gold; } in the component CSS and confirm it appears.

Recap

• {{ expression }} renders any JavaScript expression as text content inside an element.
• [property]="expression" binds a DOM property to a class value — Angular keeps it in sync.
• Use {{ }} for text; use [property] for HTML attributes and DOM properties.
• [class.name]="condition" and [style.property]="value" are convenient shorthands for dynamic classes and styles.