7. Interpolation

Interpolation in Angular is a technique used to bind data from the component to the view (HTML). It allows you to insert dynamic values directly into your HTML template (This is one way binding). The syntax for interpolation is simply using double curly braces `{{ }}`. This binding automatically updates the DOM whenever the data in the component changes, providing dynamic updates to the view.

Key Features:

1. Binding Data: Interpolation binds component properties to the HTML view.
2. Text Content: It can only be used to bind text values (not HTML or attributes directly).
3. Automatic Updates: Whenever the value of the component property changes, the view gets updated automatically.
4. Expression Support: You can include expressions, such as calculations, directly inside the interpolation.

1: Define the Component (Example)

// app.component.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userName: string = 'John Doe';
}
 

<!-- app.component.html -->
<h1>Welcome to the Angular App!</h1>
<p>Hello, {{ userName }}!</p> <!-- Interpolation here -->
 

2: Interpolation with Expressions (Example)

// app.component.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  num1: number = 10;
  num2: number = 20;
}

<!-- app.component.html -->
<h1>Sum Calculation</h1>
<p>The sum of {{ num1 }} and {{ num2 }} is: {{ num1 + num2 }}</p>