Angular- Introduction to Data Binding: String Interpolation. And I am Farish Kashefinejad, the Software Development Domain Lead at Cloud Academy. And in this video, I'm going to discuss string interpolation, the starting point for data binding. And data binding is the process of taking your data, from your TypeScript component and transferring it to the, view your HTML template. On the screen, there is the Cloud Academy lab environment divided into three screens: on the left, is the App component; in the middle, is the App Component template; and on the right is the Angular development server operating.

In this video, I will add two data values to the inside of the App component class, by passing those values to the template, using string interpolation. To begin, inside of the class, I will type framework and set that equal to the string angular. And on the following line, I will type version and set that equal to the number 17. Now I have two data types: a string type and a number type, and I will let TypeScript infer the data type for this demonstration.

Now I will use string interpolation to display these values on the page. In the template, I will create a new paragraph. I will type inside of the paragraph; This course will cover, now to use string interpolation, I need to type double curly brackets, and inside of the curly brackets, I will type framework. After hitting 'Save', now, on the right, the paragraph this course will cover Angular, appears inside of the Angular development server. So, what is string interpolation?

It is a way to take data that is inside the component's TypeScript code and display it inside of a template. And this process is known as data binding. To be more specific, this is known as one-way data binding, where the data only goes in one direction; from the component to the view. One other point of emphasis, the TypeScript code must be interpolated as a string. The existing framework value is already a string, but the version value is set equal to 17 which is a number. In the template, I will add another paragraph and type, which is currently on version double curly brackets version.

After hitting 'Save', a message now appears on the right. JavaScript can take numbers and interpolate them as strings. But with other data types such as arrays and objects, a little bit more work has to be done within the code, and this will work with functions. Inside of the component, I will create a new class function getcourseinfo, and this function will return eight template literal. So, I will begin with backticks. And inside of the backticks, I will write this course covers, using a string expression, $, { }. This stop framework and this refers to the current instance of the class.

And I will hit 'Enter', and type on the following line which is currently on version. String expression, this stop version. Now this completes the function, so on to the template. In the middle, inside of the template, I will delete the bottom paragraph. And inside the first paragraph, I will replace what's inside with double curly braces, and inside of the curly braces, execute the getcourseinfo function. Now on the right, the message from the function appears. This works because the function is returning a string.

Angular - Introduction to Data Binding: String Interpolation

About

Intended Audience

Prerequisites