Angular - Interpolation

Angular Interpolation is a technique used to bind data from the component class to the view (HTML template). It is typically used to display dynamic values in the template, allowing you to embed expressions inside double curly braces ({{ }}).

Syntax:

The expression can be any valid Angular expression, including variables, calculations, or method calls.

{{ expression }}

Example 1:

Component Properties: If you have a property in your component, you can display it in the template using interpolation.

  
			app/src/app.component.ts
		

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Welcome';
}
		

This will render the title property value in the <h1> tag.

app/src/app.component.html

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

Run the Angular Application use the command is given below

ng serve

D:\myapp>ng serve
Initial chunk files | Names         | Raw size
polyfills.js        | polyfills     | 90.23 kB |
main.js             | main          |  1.93 kB |
styles.css          | styles        | 95 bytes |

                    | Initial total | 92.26 kB

Application bundle generation complete. [3.218 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

Copy the URL: http://localhost:4200/ and run in your browser

Output

Example 2:

Using Expressions: You can also use expressions directly inside the curly braces.

  
			app/src/app.component.ts
		

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  num1 = 5;
  num2 = 10;
}
		

This will evaluate the expression num1 + num2 and display the result (15).

app/src/app.component.html

<p>Total : {{ num1 + num2 }}</p>

Output

Example 3:

Calling Methods: You can also call component methods using interpolation.

  
			app/src/app.component.ts
		

		export class AppComponent {
  getCurrentDate() {
    return new Date().toLocaleDateString();
  }
}
		

This will display the current date as returned by the getCurrentDate() method.

app/src/app.component.html

<p>{{ getCurrentDate() }}</p>

Output

Prev Next