Interpolation

Interpolation evaluates an expression and renders it as text inside your template.

3 min read Level 1/5 #angular#templates#binding

What you'll learn

Interpolate a class property
Use a method call inside interpolation
Stay inside the expression-safe subset of JS

Interpolation is the simplest template binding: drop an expression between double curly braces and Angular renders the result as text.

The Basics

<p>Hello {{ name }}</p>
<p>{{ user.firstName + ' ' + user.lastName }}</p>
<p>Count: {{ count() }}</p>

Whatever appears inside the braces is evaluated, coerced to a string, and written into the DOM as a text node.

Method Calls Work, With a Caveat

<p>{{ formatPrice(item.price) }}</p>

This works, but the method runs on every change detection cycle. For expensive computations, use a computed() signal or a pure pipe — both cache results until inputs change.

Expressions, Not Statements

Templates only allow expressions, not statements:

// allowed
{{ count() * 2 }}
{{ user?.name ?? 'guest' }}
{{ items.length > 0 ? 'has items' : 'empty' }}

// NOT allowed
{{ count = count + 1 }}     // assignment
{{ console.log('hi') }}     // no globals
{{ let x = 1; x + 1 }}      // statements

If you need logic, put it in a method or a computed signal in the component class and call that from the template.

Rendering HTML Safely

Interpolation always escapes HTML — {{ "<b>bold</b>" }} shows the literal tags, not bold text. If you genuinely need to render HTML, bind to [innerHTML] and only do so for content you trust.

Property Binding →