Template Syntax and Interpolation
Angular templates are HTML extended with a small, purpose-built expression syntax that lets a component's TypeScript state drive what appears in the DOM. The most basic form of this is interpolation, written with double curly braces {{ expression }}, which evaluates a JavaScript-like expression against the component instance and inserts the resulting string into the surrounding text or attribute content. Interpolation is one-way: data flows from the component's class to the rendered view, and Angular automatically re-evaluates and updates the DOM node whenever the underlying value changes.
Cricket analogy: Interpolation with {{ }} is like a stadium scoreboard automatically updating the runs total the instant a batter hits a boundary — data flows one way from the scorer's ledger to the display, never the other way around.
What Can Go Inside {{ }}
Interpolated expressions can reference component properties, call methods, read signals (by invoking them as functions, e.g. {{ count() }}), and use a restricted subset of JavaScript expression syntax — including property access, method calls, the ternary operator, and Angular's own pipe syntax for transforming values (e.g. {{ price | currency }}). Angular's template expressions intentionally disallow certain constructs, like assignment operators or arbitrary global function calls, both for security (avoiding arbitrary code execution paths) and to keep templates declarative rather than imperative.
Cricket analogy: Reading a signal in a template like {{ runs() }} is like a scoreboard operator calling a run total by invoking the official tally rather than guessing, and Angular's restricted expression syntax is like a broadcast rule barring commentators from making up unofficial stats live on air.
import { Component, signal, computed } from '@angular/core';
@Component({
selector: 'app-cart-summary',
standalone: true,
template: `
<p>Items in cart: {{ itemCount() }}</p>
<p>Subtotal: {{ subtotal() | currency }}</p>
<p>{{ itemCount() === 0 ? 'Your cart is empty' : 'Ready to checkout' }}</p>
<p title="{{ tooltipText() }}">Hover for details</p>
`,
})
export class CartSummaryComponent {
itemCount = signal(3);
pricePerItem = signal(19.99);
subtotal = computed(() => this.itemCount() * this.pricePerItem());
tooltipText = computed(() => `${this.itemCount()} item(s) at $${this.pricePerItem()} each`);
}Interpolation vs. Property Binding
Interpolation is really syntactic sugar layered over Angular's more general property binding mechanism, and can appear inside attribute values as well as element text content, as shown with the title attribute above. When binding a non-string value — a boolean, number, object, or when you want to skip string coercion entirely — square-bracket property binding ([disabled]="isLoading()") is used instead of interpolation, since interpolation always ultimately produces a string. Understanding this relationship helps clarify why some bindings look like {{ }} and others look like [ ].
Cricket analogy: Property binding [disabled]="isLoading()" versus interpolation is like a boolean 'match abandoned' flag directly toggling the ground's floodlights off rather than printing the word 'true' on a sign, since interpolation would coerce that flag into a meaningless string instead of an actual switch.
Interpolation in Angular is conceptually similar to JSX's {expression} in React or the mustache {{ }} syntax in Vue templates — all three interpolate expression results into rendered text — but Angular's expression grammar is intentionally more restricted than raw JavaScript, disallowing assignments and certain global calls for safety and predictability.
Because interpolated expressions re-run on every change-detection cycle, calling an expensive method directly inside {{ }} (rather than a signal, a computed value, or a memoized getter) can silently hurt performance if that method does non-trivial work — Angular has no way to know the method is 'pure' and cache its result automatically.
- Interpolation
{{ expression }}renders a component expression's result as text within a template. - Interpolated expressions can read properties, invoke signals as functions, call simple methods, and use pipes.
- Angular's template expression grammar deliberately excludes assignments and arbitrary global calls for safety and declarativeness.
- Interpolation can appear in element text content or inside attribute values (e.g. title="{{ ... }}").
- For non-string values, square-bracket property binding is used instead of interpolation.
- Avoid expensive method calls directly inside interpolation; prefer signals or computed values that Angular can track efficiently.
Practice what you learned
1. What syntax does Angular use for interpolation in a template?
2. How must a signal's value be read inside an interpolated expression?
3. Which of the following is disallowed in Angular template expressions?
4. When should you use property binding [ ] instead of interpolation {{ }}?
5. What is a performance concern with calling an expensive method directly inside {{ }}?
Was this page helpful?
You May Also Like
Anatomy of a Component
A close look at the parts that make up an Angular component — the decorator metadata, class body, template, and styles — and how they fit together.
Property and Event Binding
How Angular's square-bracket property binding and parenthesis event binding connect component state and DOM events to your template.
Introduction to Signals
Understand Angular Signals — the reactive primitive that wraps a value and notifies dependents on change, forming the foundation of Angular's modern change-detection model.
Structural Directives: *ngIf and *ngFor
Learn how *ngIf and *ngFor reshape the DOM by adding, removing, and repeating elements, plus the microsyntax and ng-template mechanics behind the asterisk.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics