How To Display Values With Interpolation In Angular?

Angular is a powerful framework for building dynamic web applications. One of its key features is data binding, which allows developers to display and update values seamlessly within the UI. Interpolation is a fundamental technique in Angular that enables the integration of component data directly into the HTML templates, making it easier to present dynamic content and computed values.

Prerequisites

• Node.js
• Angular CLI
• TypeScript

Interpolation in Angular

Interpolation in Angular is a powerful feature that allows you to display dynamic data from your component class directly within the HTML template. It uses double curly braces {{ }} to bind the data and render it as part of the DOM. This is commonly used to display variables, expressions, and function results within your template. The syntax is:

Syntax:

{{ component_property }}

Steps to Display Values with Interpolation in Angular

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new interpolation-example
cd interpolation-example

Dependencies

"dependencies": {
    "@angular/animations": "^18.1.4",
    "@angular/common": "^18.1.4",
    "@angular/compiler": "^18.1.4",
    "@angular/core": "^18.1.4",
    "@angular/forms": "^18.1.4",
    "@angular/platform-browser": "^18.1.4",
    "@angular/platform-browser-dynamic": "^18.1.4",
    "@angular/router": "^18.1.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
}

Folder Structure

Example: Create the required files as seen in the folder structure and add the following codes.

In the below example, we are showing how to use Angular's interpolation to display data from the component class directly in the HTML template. The example shows the user's name, age, and email, along with the current date, all bound to the template using double curly braces {{ }}. Additionally, we include an input field that allows the user to change their name, which is instantly reflected on the page through two-way data binding.

App Component

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

<div style="text-align: center;">
    <h1 style="color: green;">{{ title }}</h1>
    <h3>{{ subtitle }}</h3>

    <p><strong>Name:</strong> {{ user.name }}</p>
    <p><strong>Age:</strong> {{ user.age }}</p>
    <p><strong>Email:</strong> {{ user.email }}</p>
    <p><strong>Current Date:</strong> {{ currentDate | date:'fullDate' }}</p>

    <div>
        <input [(ngModel)]="user.name" placeholder="Enter your name" />
        <p>Your name is: {{ user.name }}</p>
    </div>
</div>

// src\app\app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

//src\app\app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'GeeksforGeeks';
    subtitle = 'Displaying values with interpolation in Angular';
    user = {
        name: 'GFG',
        age: 30,
        email: '[email protected]'
    };
    currentDate = new Date();
}

Steps to Run the Application

Open the terminal, run this command from your root directory to start the application

ng serve --open

Open your browser and navigate to http://localhost:4200

Output