Video Tutorials

Policy

Twitter LogoFacebook Logo
Interpolation
Inserting expressions in the DOM
By: King

Angular provides a way for us to insert expressions inside of an HTML page. This behavior is described by the term - interpolation. It allows us to dynamically display contents on the page by performing logical expressions or linking data between our class and the HTML page.

Image from Codeible.com

Take a look at this example:

<h1>Welcome to The Complete Angular Course</h1>

We have some pure HTML code that displays a static message. It would be nice if we can somehow modify the code to display a different message depending on the user who entered the page. 


What if the user want The Complete Python Course instead of The Complete Angular Course? We want the page to be able to display the contents that the user wants.

We can do this with interpolation. Let’s see the same example when we apply interpolation.

Image from Codeible.com

We took the variable in the class and inserted in the head element to replace a portion of the original text. This way, we can change the value of the variable to something else, and it will be displayed instead. To do interpolation, we use the double curly brackets syntax and place the expression inside.

Let’s do some examples. Open your Angular project on VS code. In the app component TypeScript file, define a variable with a text.

myMessage = "Hello, I am King.";

Then go to the app component HTML page and insert the variable. Use the double curly brackets syntax and place the variable in between the brackets.

{{myMessage}}

Save the project and start the local server. Open the browser and go to localhost:4200. You should see the text - Hello, I am King. in the browser.

Hello, I am King.

As you can see, instead of having a static message in the HTML page, we brought a variable from the class into the HTML page.


Let’s do another example. This time, we will have 3 buttons that will change the value of the message depending on which button is clicked on and let’s see what happens.

Go back to VS code and go to the app component html page. Add the 3 buttons and label them – Angular, Python, and Java. Then attach a click event and assign a handler function for each.

{{myMessage}}

<button (click)="onAngularClick()">Angular</button>
<button (click)="onPythonClick()">Python</button>
<button (click)="onJavaClick()">Java</button>

Go to the app component TypeScript file and define the 3 functions.

The first function will change the value of the variable to “The Complete Angular Course,”
The second will change the value to “The Complete Python Course,”
And the third will change the value to “The Complete Java Course.”

onAngularClick(){

   this.message = "The Complete Angular Course";
}
onPythonClick(){
   this.message = "The Complete Python Course";
}
onJavaClick(){
   this.message = "The Complete Java Course";
}

So, when we click on the Angular button, it should change the value of the variable and display The Complete Angular Course on the screen, and when we click on the Python button, it will display The Complete Python Course, and so on. Let’s give it a shot. 

Save the project and go to the browser.

Start by clicking on the Angular button, then the Java button, and then the Python button.

As you can see, with interpolation, we can control what gets rendered on the screen without the need to refresh the page.

Interpolation is not limited to variables. How it work is that it will evaluate the expression and then convert the result into a string so it can be used in the HTML page. We can also insert functions and methods, as well as mathematical calculations.

Recap

Let’s take a moment to recap what we have learned.

1. We learned that interpolation is the term to describe the behavior of inserting expressions in a HTML page.

2. We learned that interpolation is represented by the double curly bracket syntax

3. We learned that we can use interpolation to link data between our class and HTML page and thus, it let’s us control and change what gets displayed on the page without the need to refresh the page.


Sign In