Angular Basics›Core· 25 min read

Showing Data with Interpolation

Double curly braces drop a value from your class straight into the HTML — the simplest way to show data.

What you will learn

Print class data with double curly braces
Use expressions inside interpolation
Know what interpolation can and cannot do

The double-curly-brace trick

Interpolation means putting a value from your component into the template using {{ }}. Whatever is inside the braces is read from the class and printed as text.

Two simple properties on the class

// greeting.component.ts
export class GreetingComponent {
  name = 'Asha';
  city = 'Pune';
}

Note: Output: (No visible output by itself — this just stores two values.) The class now holds name = “Asha” and city = “Pune”. The template below will pull these out and print them.

Interpolation prints each property

<!-- greeting.component.html -->
<p>Hello, {{ name }} from {{ city }}.</p>

Note: Output: Hello, Asha from Pune. Angular swaps {{ name }} for Asha and {{ city }} for Pune. Change the values in the class and the page updates by itself.

You can put expressions inside

The braces accept small expressions, not just plain names. Angular evaluates them and prints the result.

Numbers and a name to work with

// component class
price = 250;
quantity = 3;
firstName = 'asha';

Note: Output: (No visible output yet.) These are just three values on the class: a price, a quantity and a lowercase firstName. The template next does some maths and a method call with them.

Math and a method call inside interpolation

<p>Total: {{ price * quantity }} rupees</p>
<p>Name: {{ firstName.toUpperCase() }}</p>

Note: Output: Total: 750 rupees Name: ASHA Angular calculates 250 * 3 and calls .toUpperCase() for you, then prints the results as text.

Watch out: Keep interpolation simple — for display only. Do not put assignments (=) or complicated logic in the braces. Heavy logic belongs in the class.

Tip: Interpolation always produces text. To set an element’s property (like an image src or a button’s disabled), you use property binding — that is the next lesson.

Q. What does {{ 2 + 3 }} show on the page?

Answer: Angular evaluates the expression inside the braces and prints the result, so you see 5.

✍️ Practice

Add a score number to a component and show Your score is {{ score }}.
Print a discounted price using a multiplication expression inside {{ }}.

🏠 Homework

Make a component with width and height numbers and display the area using interpolation.