Angular String Interpolation

Last Updated on May 18, 2022
Angular String Interpolation

Angular String Interpolation

Let's start by having a closer look at string interpolation. The string interpolation helps us to use dynamic data in your view HTML template. String interpolation is the one-way data binding which means that data flow in one direction from component to view in Angular.

Angular String Interpolation code syntax.


{{templateExpression }}

Let's see the code example and see how we can use string interpolation.


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

//Define a template within the component withing backticks
@Component({
    selector: 'app-demoComponent',
    template:  `
            <h1>{{message}} </h1>
        `
    })

    export class DemoComponent {
    message = "Welcome to the Angular world!";
    }

As an output, we will see "Welcome to the Angular world!" on the web browser.