Chapter 3.1☕ 14 min read

Interpolation {{ }} and Expressions

Interpolation is the simplest way to display component data in your template.

01What is Interpolation

Interpolation uses double curly braces {{ expression }} to display TypeScript data directly in your HTML template.

"Interpolation = LED board — jo data TypeScript mein hai wo HTML pe dikhta hai." Just like an LED display shows information from its internal system, interpolation shows your component data in the template.

Under the hood, Angular converts interpolation to property binding during compilation. {{ title }} becomes [textContent]="title" or similar.

It's the most commonly used template feature — you'll use it in every single component.

02What Can You Write Inside {{ }}

You can write various expressions inside {{ }}. Here's what works:

Variables: {{ name }} — just output a property
Math: {{ 2 + 2 }}, {{ price * quantity }}
Method calls: {{ getFullName() }} — calls component method
Ternary: {{ isActive ? 'Online' : 'Offline' }}
String concat: {{ city + ', ' + state }}
Pipe transforms: {{ date | date:'short' }}

Angular evaluates these expressions and converts the result to a string for display.

03What You CANNOT Write Inside {{ }}

Not everything works inside {{ }}. Angular template expressions are limited by design:

Assignments: {{ x = 5 }} — ❌ ERROR. Use event binding instead.
new keyword: {{ new Date() }} — ❌ Won't compile
Expression chaining: {{ a++; b-- }} — ❌ No increment/decrement
if/else blocks: {{ if(x) {} }} — ❌ Use ternary or @if
Array methods: {{ items.sort() }} — ❌ Mutating methods

"Template sochna hai, programming nahi — complex logic component mein rakho." Keep templates simple.

04Expression vs Statement

Understanding the difference between expressions and statements is key:

Expression = produces a value. {{ 2+2 }}, {{ name }}, {{ a ? b : c }} — these all produce a value Angular can display.
Statement = performs an action. x = 5, return, if(){} — these do things but don't produce a usable value.

"Expression = sawaal ka jawab deta hai, Statement = kuch karta hai — Angular sirf sawaal poochta hai template mein."

Interpolation only accepts expressions. Statements go in event bindings (click)="doSomething()".

05Performance Tip

⚠️ CRITICAL PERFORMANCE TIP:

{{ methodCall() }} runs on EVERY change detection cycle — which can be hundreds of times per second!

If your method does heavy computation:

❌ {{ calculateTotal() }} — runs constantly, even if data hasn't changed
✅ total = computed(() => this.items.reduce(...)) — only recalculates when items change
✅ {{ data | heavyPipe }} — pipes only run when input changes

"Har baar method call = har baar biryani banana — plate se khaao, kitchen se nahi." Pre-compute your values instead of computing them in the template.

Key Takeaways

✅ Interpolation {{ }} displays TypeScript data in HTML templates.
✅ Valid expressions: variables, math, method calls, ternary, pipes.
✅ Invalid: assignments, incre/decrements, if blocks — use event binding or @if instead.
✅ Expressions produce values; statements perform actions.
✅ Avoid method calls in interpolation — use computed signals or pipes for performance.

Previous2.6 — Lifecycle Hooks 📋 All Chapters Next Chapter3.2 — Property Binding →