Templates & Interpolation

Display component data in a template using text interpolation and understand how Angular templates are compiled.

Text Interpolation

Double curly braces insert the value of a component class property (or expression) into the rendered text of an element — Angular's equivalent of what other frameworks call "mustaches."

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<p>Hello, {{ name }}!</p>`,
})
export class GreetingComponent {
  name = 'Angular';
}

Expressions in Templates

Templates support simple JavaScript-like expressions — property access, method calls, ternaries — but not full statements like variable declarations or if/else blocks.

<p>{{ 2 + 2 }}</p>
<p>{{ user.name.toUpperCase() }}</p>
<p>{{ isActive ? 'Online' : 'Offline' }}</p>

No Side Effects in Interpolation

Avoid calling a method with side effects (like one that mutates state) directly in interpolation — Angular may re-evaluate a template expression more than once per change detection cycle, so anything called there should be a pure, repeatable read.

Templates Are Compiled and Type-Checked

Unlike some frameworks where templates are only interpreted at runtime, Angular's compiler processes templates ahead of time and, with strict template checking enabled, actually type-checks expressions against your component class — catching a typo in a property name at build time, not in the browser.

Common Beginner Mistakes

Using mustaches for an HTML attribute

Writing <img src="{{ imageUrl }}"> works in Angular for simple cases, but property binding ([src]="imageUrl"), covered in the next lesson, is the correct, more general mechanism for binding attributes and DOM properties.

Writing multi-line logic directly in a template expression

Keep templates focused on display — move non-trivial logic into a getter, a method, or (as you'll see later) a computed signal.

FAQs

Can interpolation render raw HTML, like a <b> tag?

No — interpolation always renders as plain, escaped text for security. Use property binding to [innerHTML] (with sanitization in mind) for actual HTML content.

Does interpolation work inside standalone component templates the same way?

Yes — templates work identically whether inline (template: `...`) or in a separate .html file.

Summary

Interpolation displays expressions as text, and Angular's compiler type-checks templates against your component class ahead of time. Next, you'll learn property and event binding for attributes and user interaction.

Next Lesson →