In this article we will discuss Angular interpolation. If you miss our previous article then please go through the link Styling Angular Components. In this article we will cover below points.
- What is Angular Interpolation ?
- How Angular Interpolation is used with Examples ?
What is Angular Interpolation ?
Interpolation is all about data binding. Angular data-binding are classified into 3 categories.
- One way data-binding - From Component to View Template
- One way data-binding - From View Template to Component
- Two way data-binding - From Component to View Template & From View template to Component
If you want to display the read-only data on a view template (i.e. From Component to the View Template), then you can use the one-way data binding technique i.e. the Angular interpolation.
The Interpolation in Angular allows you to place the component property name in the view template, enclosed in double curly braces i.e. {{propertyName}}. So, the Angular Interpolation is a technique that allows the user to bind a value to a UI element.
Let's take an angular example and see how Angular Interpolation is work.
app.component.ts
Open app.component.ts file and add the below code to access the firstName, lastName and company.
Let's take an angular example and see how Angular Interpolation is work.
app.component.ts
Open app.component.ts file and add the below code to access the firstName, lastName and company.
When we run the application you can see the output like below;
Angular Interpolation can be use in many ways.
(i) Angular Interpolation with hard-coded string
(ii) Angular Interpolation with Expression
(iii) Angular Interpolation with Ternary Operator
(iv) Angular Interpolation Using Image Tag
(v) Angular Interpolation Using Method
(i) Angular Interpolation with hard-coded string
We can use in Angular to concatenate some hard-coded string value with the property value. In order to understand this, let us add the hard-coded string First Name before the firstName Property and Last Name before the lastName property and Company name before company property.
When we run the application you can see the output like below;
(ii) Angular Interpolation with Expression
In Angular using Interpolation (i.e. double curly braces), you can also specify some valid expression. For example, if you want to perform mathematical calculations then you can do such calculations using interpolation like below;
 |
| The output is printed like above |
(iii) Angular Interpolation with Ternary Operator
The expression that is enclosed in the double curly braces is commonly called Template Expression and the template expression can also be a ternary operator.
 |
| The output is printed like above |
(iv) Angular Interpolation with Image Tag
You can also use interpolation to set <img> src as like below.
When we run the application you can see the output like below;
(v) Angular Interpolation using Method
You can also use method in typescript, this is called as method interpolation in angular. Let's create a method named as GetFullName which is concatenate the FirstName and LastName.
When we run the application you can see it fetch the Full Name as expected.
Summary
In this tutorial we discussed Angular Interpolation. If have any question related to this topic then give your feedback.
Post a Comment