Displaying Data in Angular with Interpolation

So far your components only showed fixed text. Real apps show data that comes from code: a user's name, a price, the number of unread messages. In Angular you place such values in a template with double curly braces, called interpolation.

What you will learn

• How to show class properties in a template
• Which expressions you can write between the braces
• Why some members are marked protected

Show a value

Create a component called Profile. Its class holds the data, and its template displays it:

// src/app/profile/profile.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-profile',
  template: `
    <h2>{{ name }}</h2>
    <p>Learning: {{ subject }}</p>
    <p>Name in capitals: {{ name.toUpperCase() }}</p>
    <p>Two plus three is {{ 2 + 3 }}</p>
    <p>Status: {{ isStudent ? 'Student' : 'Professional' }}</p>
    <p>City: {{ address.city }}</p>
    <p>{{ describe() }}</p>
  `,
})
export class Profile {
  protected readonly name = 'Alex';
  protected readonly subject = 'Angular';
  protected readonly isStudent = true;
  protected readonly address = { city: 'Pune', country: 'India' };

  protected describe(): string {
    return `${this.name} is learning ${this.subject}.`;
  }
}

Use it from the root component so you can see it:

// src/app/app.ts
import { Component } from '@angular/core';
import { Profile } from './profile/profile';

@Component({
  imports: [Profile],
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

<!-- src/app/app.html -->
<main>
  <h1>Interpolation</h1>
  <app-profile />
</main>

The page now shows the name, the subject and the computed text. Angular reads each value from the class when it draws the template.

What can go between the braces

Inside {{ }} you write a template expression. It looks like JavaScript, and it may contain:

• Property names, such as name, and nested access, such as address.city
• Calculations, such as 2 + 3 or price * quantity
• Method calls, such as name.toUpperCase() or describe()
• The conditional operator, such as isStudent ? 'Student' : 'Professional'

Angular converts the result to text. A value of null or undefined shows as an empty string.

What is not allowed

An expression must only calculate a value. It cannot change anything, so these are errors:

• Assignments such as count = 5 or count++
• Creating variables with let or const
• Statements such as if or for (use the control flow syntax in a later lesson)

Keep expressions short. If something is getting complicated, move it into a method or, better, a computed value, which you will learn soon.

Why protected?

You may wonder about the protected keyword on the properties. The template belongs to the class, so it can read members that are protected or public. It cannot read private ones. Marking template-only members protected keeps them out of the component's public surface, so other code cannot depend on them by accident. The CLI uses the same convention in the generated App class. readonly simply means the property is never reassigned.

Common mistakes

• Property does not exist errors: a typo in the template, such as {{ nmae }}, is reported when you build. Read the message, it names the property.
• Using `private`: you will get an error that the member is private and not accessible from the template.
• Forgetting the braces: writing name instead of {{ name }} displays the word "name".

Try it yourself

1. Add a property for your hobby and show it in a sentence.
2. Show the length of your name with name.length.
3. Add a method that returns a greeting based on a boolean, and call it in the template.

Quick check

1. What do double curly braces do in a template?
2. Can you write count = 5 inside {{ }}?
3. Which access modifiers let a template read a class member?

Values that never change are not very interesting. Continue with Property and event binding to react to the user. You can also read the official template guide.