This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Interpolation" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Interpolation is the process of binding to component properties both inside and outside of a template. Angular uses the double-curly-brace syntax to create an interpolated property. Scott introduces interpolation and talks briefly about the different ways data can flow between components and templates.

Get Unlimited Access Now

Transcript from the "Interpolation" Lesson

>> [MUSIC]

>> Scott Moss: So now we're gonna talk about templates, one of the most awesome things about front-end frameworks. That's always the unique thing about front-end frameworks, it's like, how do they do their templates? So, I think this is pretty cool. If you're familiar with Angular 1, you'll see some things that you're kind of, okay, I get it.

[00:00:21] But most of it's like that's not even valid, how are they doing that? But, it's valid. Trust me. [LAUGH] I looked it up. [LAUGH]
>> Lukas: On the internet.
>> Scott Moss: I was like, that's no, no, they, no. Okay, it works, never mind. Cool, so templates. A lot of things when we talk about templates.

[00:00:41] Here's some of the main points, the crux. We have interpolation, which is not new. Every template system, that's the base of a template system, all the way down to a small one like Lodash. So, we have interpolation, use the same syntax. Method binding, property binding and two way binding.

[00:01:01] So, we'll talk about the differences between those three, and really get into it. And we have this hashtag operator, which is new. An asterisk operator, which is new. And then, Elvis operator which is actually what they call it on Angular docs.
>> Lukas: But that's been around since like the 50s.

>> Scott Moss: It's been around a while.
>> Speaker 3: It's shows up once in a while.
>> Lukas: So write on the wall. Lukas made the Elvis joke.
>> Scott Moss: So, we'll talk about that stuff.
>> Speaker 3: Leave the building.
>> Scott Moss: So here's a little graphic that Lukas just did so well. He's an artist.

[00:01:40] That's going to, it's actually, I think you guys got a graphic earlier today. This is a little piece from it. This just kinda goes through what the template, and what's happening between the template and the component and the relationship there. So property binding is, most of the data's unidirectional, so it's going one direction with the, there's one of one.

[00:01:58] But we'll get to that in a minute. So, property binding comes from the component, and it binds to properties in the template, and not attributes. It's very important that we separate the two. Properties are part of the DOM, attributes are part of HTML. Two different things. Now, some people get confused because most properties have mappings to attributes.

[00:02:23] So that's like, it's binding to the attributes. It's not. It's binding to properties. Very important that you realize that, cuz some of them don't switch over, like col span. There's no property for that, but there's an attribute for that. And stuff like that. Text content. There's a property for that, but there's not an attribute for that.

[00:02:41] So they don't really match. So we're binding some properties, we're not binding to attributes. There are some attributes binding that we can do, that Angular provided for us. And we can talk talk those a little bit. But we're binding to properties one way. And then, event binding is when we bind to an event that is secured either from the DOM or an event that we created ourselves.

[00:03:03] A unique event, or a new event that we made. And then, our component can respond to that. And that's pretty much how templates and components work.
>> Scott Moss: Any questions on that? Almost the same as Angular 1, pretty much.
>> Scott Moss: So, interpolation. Up top, we see the values between the two mustaches there.

[00:03:27] Unidirectional, going straight to the template from the component. Properties use the square brackets. And we'll get into more of the syntax in a little bit. But also, like interpolation above it, it's gone from the component to the template. Events are going the other way. So, events are, come from the templates and we handle them in the component.

[00:03:48] And then below, we have the one example of the two way data binding, which is what we're used to in Angular 1, where it just goes both ways. Which is really, really handy for forms.
>> Scott Moss: Probably the only reason to use two way data binding is for forms.

[00:04:03] I can't think of any other way, any other reason why you would use it. In my opinion.
>> Scott Moss: Any questions on this stuff?
>> Lukas: I have one small comment just to kind of lay some ground work. If you notice that property binding is from the component to the template, and the event is from the template to the component, you can start to think of those as, essentially, because they're unidirectional, as input and output.

[00:04:30] So start to think about those relationships, because once we get into smart and dumb components, we'll start to leverage this quite heavily with the input and output metadata. And basically saying I'm putting this thing in and I'm binding to it, or when something happens I want to surface it and I want to get it back out.

[00:04:46] So, probably bindings, event bindings are kind of the foundation of creating well-encapsulated components via input and output.
>> Scott Moss: Yeah, if you come from React, you can think of it as the property is just like, I'm passing it some stuff to this component, and the event handlers is here's a function of I want to happen when this event happens.

[00:05:07] Very similar. Whereas the property actually goes a step further and bind to the dom. But as far as passing it to components, it's very similar.
>> Scott Moss: All right. So, interpolation. It's really not that new from Angular 1. But, so, this is gonna allow us to bind to component properties in and out of the template.

[00:05:29] Define with the curly braces, curly brace syntax. We can bind to methods as well. And Angular coverts interpolation to property binding. So that, the sweet thing about interpolation is that it uses a JavaScript like syntax. It's not full JavaScript. We can't use all valid JavaScript in interpolation. For instance, the bitwise operators like python N, we can't use those.

[00:05:50] Why? Because Angular uses pipes for pipes. We don't get access to global namespaces, so we can't do count to that log or math.max. We can't do that, we don't get access to any of that. Where the interpolation is scoped in the context of the component that it's in, or a local variable.

[00:06:11] So we don't get access, you can't do all of JavaScript there. But we can do pretty much, inside those rules, we can do pretty much any expression that we want. Does that make sense? So any, other than those rules that I was talking about, we can do any valid expression inside of here.

[00:06:27] So an expression is just going to bind to the target, it's gonna create a value. That's what an expression does.