Interpolation

Property Binding

Interpolation is a one-way data binding technique in Angular that allows you to embed expressions within double curly braces {{ }} directly in the HTML template. The expression is evaluated and the result is converted to a string, which is then rendered in the view.

Syntax of interpolation:

<p>{{ expression }}</p>

Features of Interpolation:

Simple syntax for embedding dynamic values.
Automatic data conversion to string.
Ideal for displaying data in templates.

Example of Interpolation:

Step 1: Create Angular Project using the following command.

ng new interpolation-example
cd interpolation-example

Step 2: Create a component ‘welcome’ using the following command.

ng generate component welcome

Folder Structure:

Dependencies:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }

Code Example:

HTML

<!-- welcome.component.html -->

<p>Welcome, {{ username }}!</p>

HTML

<!-- app.component.html -->

<app-welcome></app-welcome>

JavaScript

//welcome.component.ts

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

@Component({
    selector: 'app-welcome',
    templateUrl: './welcome.component.html',
    styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent {
    username: string = 'Sourav Sharma';
}

Run the Application using the following command.

ng serve --open

Output:

Interpolation vs. Property Binding in Angular

Angular, a powerful front-end framework, offers various techniques to dynamically update and display data in your applications. Two commonly used methods for this purpose are interpolation and property binding.

In this article, we will learn about interpolation and property binding and also see the key differences between them.

Table of Content

Interpolation
Property Binding
Difference between interpolation and property binding in Angular
Summary

Tags:

#AngularJS-Basics #AngularJS #Web Technologies