Angular Interpolation

Angular interpolation is one-way data binding. interpolation allows you to pass data from the component class to the template. In the template you wrap it in curly braces. Say we have a class as follows…

export class AppComponent {
    dessert = {
        dessertName: 'Chocolate Ice Cream',
        amount: '2 Scoops'
    };
}

To use this in our html template, we need to interpolate the data with curly braces. Here is an example…

<h1>Dessert I Love!</h1>
<p>I love {{dessert.amount}} of {{dessert.dessertName}}!</p>

I hardcoded the values above, but usually, you will not do this. You can pull data from an API and house it in a variable and utilize interpolation to display it to the end user. When the value of the variable changes, the data binding will keep the template up to date. This is done by Angular’s change detection service. You will use interpolation a ton in your Angular apps.

Happy Coding!

Clay Hess