Made withAngularClip

Angular Tutorial - 5 - Interpolation

C

Codevolution

Creator on the Angular channel

Watch on YouTube ↗

674K viewsNov 27, 20178:08 runtime

Learn the fundamentals of data binding in Angular with this detailed tutorial on interpolation. Discover how to dynamically display component data in your template using the `{{ }}` syntax. This guide covers evaluating JavaScript expressions, performing string concatenation, and…

Chapters

#angular#clip#frontend

What is Angular Interpolation?

Interpolation is a fundamental one-way data binding technique in Angular. It allows you to bind data from a component's class (the TypeScript file) to its template (the HTML). The syntax uses double curly braces: {{ expression }}.

What You Can Do with Interpolation

Bind class properties: Display the value of a property from your component class.
- Example: <h2>Welcome {{ name }}</h2>
Evaluate JavaScript expressions: Angular will compute the expression and render the result.
- Example: {{ 2 + 2 }} will render 4.
Perform string concatenation:
- Example: {{ 'Welcome ' + name }}
Use JavaScript properties and methods: You can access properties and call methods on your bound data.
- Examples: {{ name.length }} or {{ name.toUpperCase() }}
Call component methods: You can execute methods from your component class and display the returned value.
- Example: {{ greetUser() }}

Limitations of Interpolation

Important
Interpolation is powerful but has restrictions to keep templates simple and predictable.

No assignments: You cannot use assignment operators (=, +=, -=, etc.) inside an interpolation binding.
- Invalid: {{ a = 2 + 2 }} will cause a template parse error.
No access to global variables: You cannot access global JavaScript objects like window or document directly from the template.
- Invalid: {{ window.location.href }} will result in an error because window is undefined in the template's context.

Workaround for Accessing Global Variables

Tip
To use a global variable's value in a template, expose it through a component property.

In your component's TypeScript class, create a public property.
Assign the value from the global variable to this property.
```
public siteURL: string = window.location.href;
```
Bind this new property in your template using interpolation.
```
<p>Site URL: {{ siteURL }}</p>
```

Initial Project Setup

Alright guys, in this video we are going to learn about interpolation. Now to get us started, I've created a new project called 'binding' and within the project, I have generated a new component called 'test component'.

I have also simplified the HTML in the app component so this displays just 'from app component' in an h1 tag. And in the test component, I've moved the template inline so it's in the same TypeScript file and the template just displays 'welcome Bishwas'.

So if you save the project and run it, the template is displayed in the browser. 'from app component' which is from the app component.html file and then 'welcome vishwas' from the test component TypeScript file.

Introduction to Interpolation

Alright, now if you take a look at the code, the name 'vishwas' is static. So the message will always be 'welcome vishwas'. But what we want is the name to be dynamic. For example, we greet the user that is currently logged in. Now the name may come from a web service or a web API, but the bottom line is the value may change at any point of time.

So for that, what we do is create a new property in the class. And let's call it name and assign it the string 'which was'. So public name = 'vishwas'. Now, how do we get this value into our template? The answer is double curly braces. So instead of 'vishwas', we use double curly braces and then inside the braces, we specify the property. In our case, it is the name property. And this syntax of a property or an expression within double curly braces is known as interpolation in Angular.

By using interpolation, we are asking Angular to evaluate the content inside the curly braces and display the value when the component is rendered in the browser. So if we save this and refresh the browser, you can still see 'welcome vishwas', but this time the name comes from a class property and is not static. So for example, if I change the name to Codevolution, the browser updates and we can see 'welcome Codevolution'. Of course, right now I am changing the name property manually, but in a practical application, the name can get its value from a variety of sources. So this is interpolation, which is the simplest way to bind data from a class to the template.

Evaluating Expressions and Strings

Alright, now let's take a look at some more examples to fully understand what interpolation can and cannot do.

Alright, now close the Explorer and also the app component HTML because the test component types grid file is the only thing that we are going to be working with for the next couple of videos. Alright, back to interpolation.

Now the first example is about expressions. So I'm going to add a new h2 tag, and I will be using h tags only for visibility in the browser. And within the h2 tag, we can type within double curly braces 2 + 2. Now what happens is Angular evaluates the expression and displays the result in the browser. So if you go back to the browser, you can see 4, which is 2 plus 2.

Similarly, you can perform a string concatenation as well. So I'm gonna add another h2 tag and within double curly braces this time, I'm going to say within a pair of double quotes, 'welcome' and then concatenate it with the name. So it is going to be 'welcome' followed by the name, which is Codevolution. So if we head back to the browser, you can see 'welcome Codevolution'. So this is a result of string concatenation. Angular will replace the value for the name property and then concatenate it with the 'welcome' string to display 'welcome Codevolution' in the browser.

Using Properties and Calling Methods

Now the next example is using JavaScript properties and methods within the curly braces. So for example, I can have another h2 tag and then over here I'm going to have double curly braces and I'm going to type name.length. So this will display the length of the string 'Codevolution', which is 12. And in the browser, you can see 12 being displayed.

Similarly, we can also use methods. For example, I can have another h2 tag and over here within double curly braces we can have name.toUpperCase(). And now the name will be displayed in uppercase in the browser. So 'Codevolution' in uppercase.

Apart from the built-in JavaScript methods, you can also call methods defined in the component class. For example, let's create a new method. I'm going to call this greetUser and then we are going to return 'Hello ' concatenated with the name, so this.name, which represents this name property 'Codevolution'. Now back in the template, we can call this method. So I'm going to add a new h2 tag and within double curly braces, I can call greetUser(). Now if we go back to the browser you can see 'Hello Codevolution' is rendered. So these are some of the things you can do with interpolation.

Understanding Interpolation's Limitations

But what are some of the things you cannot do? Now the first one is assigning the expression to a variable. So for example, let me create a new h2 tag and within double curly braces if you try a = 2 + 2 and head over to the browser, we have a problem rendering the HTML. And if you take a look at the console, you can see that we have a parse error, template parse error: 'Bindings cannot contain assignments'. So you cannot assign the result of an expression to a variable within double curly braces. So assignments are not possible.

Now, another limitation is the access to global variables such as window, screen, and so on. So if you try to find out the URL of the current page using window.location.href, you get error: 'cannot read property location of undefined'. So the template is not aware of the global JavaScript variables.

Now, if you do need to access them, however, you can do it in the class and then bind it to the template. So for example, I can create a new property, let's call this public siteUrl = window.location.href. And then in the template, we can bind this siteUrl. So, siteUrl. Now if we go back to the browser, you can see http://localhost:4200.

Summary and Conclusion

All right, just to quickly summarize what we have learned so far. With interpolation, you can bind data from the class to the template, and the syntax is double curly braces. And within the double curly braces, you have a property or an expression. So you can evaluate any JavaScript expression and the result will be displayed in the browser. You can also perform string concatenation, you can use JavaScript properties and methods as well, you can even call methods that you have defined in the component's class within interpolation. However, you cannot perform assignments or access global JavaScript variables with interpolation.

Alright, that's pretty much it about interpolation. Thank you guys for watching, don't forget to subscribe, and I'll see you guys in the next video.