Angular 10 Tutorial - Interpolation

In this tutorial, we will learn about interpolation in Angular 10. Angular interpolation is used to display component properties into the respective view template with the help of double curly braces. We can display all kinds of properties data into the view, such as strings, numbers, dates, arrays, lists, or maps.

Data binding consists of one-way data binding and two-way data binding. Interpolation is used for one-way data binding. Let's create some properties and display them into the component view.

Creating Properties and Displaying them using Interpolation

Switch to the project and open the app.component.ts file. Here, let's create some properties. Now, access these properties into the App.component.html file and display them using interpolation. Open the app.component.html file and access the first name and last name:

Name: {{ firstName }} {{lastName}} 

Now, save the file and let's check. Switch to the browser, and you can see the name "Kerry Smith".

Displaying Multiple Properties

Now, display the phone, email, and age. Just write:

Phone: {{phone}} 
Email: {{email}} 
Age:{{age}} 

Save and see the result. You can see the phone, email, and age.

Accessing Arrays using Interpolation

Now, let's access the array "hobbies". Just write:

Hobbies {{hobbies}} 

Save and see the result. You can see the hobbies. If you want to display any one hobby, then just write:

{{ hobbies[0] }} 

You can see the first hobby. If you put 1 here, it will show the 2nd hobby. You can see here. Now, add the index 2, and here you can see the 3rd hobby.

Accessing Objects using Interpolation

Now, let's access the "address" object:

Address : 
<p>Street 
    {{address.street}, {{address.city}}, {{address.state}}, 
</p> 

Now, see it in the browser, and you can see the address.

Using Arithmetic Operations with Interpolation

You can also use arithmetic operations with interpolation:

{{4+4}} 
{{5-2}} 
{{8*2}} 
{{16/8}} 

You can see the result. So, in this way, you can use interpolation in Angular 10.