Module Recap

Module 03 covered the full Angular template syntax. You now have the tools to build dynamic, interactive templates that respond to data and user actions.

What you learned

Interpolation {{ }} renders values as text. Any public property or expression can appear between double curly braces. Keep expressions simple — move complex logic into the component class.

Property binding [property]="value" sets DOM properties dynamically. Angular keeps the DOM in sync whenever the class property changes. Use it for [src], [disabled], [class.active], [style.opacity], and any other DOM property.

Event binding (event)="method()" calls class methods when DOM events fire. Use $event to access the event object when needed. (keydown.enter) and similar syntax filter by key.

[(ngModel)] provides two-way binding for simple inputs. It requires FormsModule in imports and keeps the class property and input value synchronized. Use it for single fields; use reactive forms for complex multi-field scenarios.

@if and @for control what renders. @if (condition) shows content conditionally. @for (item of list; track item.id) renders a block per item efficiently. @empty handles empty lists.

Pipes transform values for display. date, uppercase, number, currency, and async cover the most common cases. The async pipe is especially important — it subscribes and unsubscribes automatically.

How this connects to CinemaVault

A single MovieCard template uses almost every concept from this module:

<div class="card" [class.saved]="isInWatchlist">
  <img [src]="posterUrl" [alt]="movie.title" />
  <div class="info">
    <h3>{{ movie.title }}</h3>
    <p>{{ movie.release_date | date:'yyyy' }}</p>
    <p>{{ movie.vote_average | number:'1.1-1' }} / 10</p>
  </div>
  <button class="watchlist-btn" (click)="toggle()">
    {{ isInWatchlist ? '✓ Saved' : '+ Save' }}
  </button>
</div>

• [class.saved] — property binding with class shorthand
• [src] and [alt] — property binding
• {{ movie.title }} — interpolation
• | date:'yyyy' and | number:'1.1-1' — pipes
• (click)="toggle()" — event binding
• {{ isInWatchlist ? '...' : '...' }} — inline conditional expression

Key terms

Term	What it means
Interpolation	{{ expr }} — renders a value as text in the DOM
Property binding	[property]="expr" — sets a DOM property to a class value
Event binding	(event)="method()" — calls a method when a DOM event fires
Two-way binding	[(ngModel)]="prop" — keeps input value and class property synchronized
@if	Conditionally renders a template block
@for	Renders a template block for each item in an array
track	Required expression in @for that identifies items for efficient DOM updates
Pipe	Transforms a value for display using `
async pipe	Subscribes to an Observable and returns its current value; auto-unsubscribes

What is next

Module 04 — Routing →

Module 04 covers Angular’s router: how SPAs navigate without full page reloads, defining routes and <router-outlet>, RouterLink for navigation, reading route parameters and query params via ActivatedRoute, and protecting routes with guards.