Angular Interpolation

🔹 Interpolation in Angular

Interpolation in Angular is a way to bind data from the component class to the view (template). It uses double curly braces {{ }} to display dynamic values in HTML.

🧠 What Interpolation Does

Binds component properties to the view

Example:

<h1>{{ '{{ title }}' }}</h1>

If title = "Welcome" in your component, the view will render: Welcome

Evaluates expressions

You can use simple operations like:

<p>{{ '{{ 5 + 3 }}' }}</p> <!-- Outputs: 8 -->
<p>{{ '{{ user.name.toUpperCase() }}' }}</p>

Does not modify DOM attributes directly

It only works with property values, not HTML attributes like href, src, etc.

✅ Key Points

• Used to display variables, expressions, or method results in the template.
• Syntax: {{ expression }}
• Can perform operations like string concatenation or calculations inside {{ }}.

🧪 Example

Component (TypeScript):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Angular Interpolation Example';
  user = 'John';
  num1 = 10;
  num2 = 20;

  getGreeting() {
    return "Hello " + this.user + "!";
  }
}
    

Template (HTML):

<h1>{{ title }}</h1>
<p> User: {{ user }} </p1>
<p>Sum: {{ num1 + num2 }}</p1>
<p>{{ getGreeting() }}</p1>

📌 Output in Browser

Angular Interpolation Example
User: John
Sum: 30
Hello John!
    

🔐 Best Practices for Learners

• Keep expressions simple—avoid complex logic inside {{ }}.
• Use interpolation for displaying data, not for triggering side effects.
• Prefer property binding ([property]="value") when working with DOM attributes.

💡 Tip: Interpolation is one-way binding (from component → view). If you need two-way binding, use [(ngModel)].