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

Introducing interpolation, which is the process of binding to component properties both inside and outside of a template, Lukas discusses and demonstrates the different ways data can flow between components and templates: Property, Event, and Two-Way Bindings.

Get Unlimited Access Now

Transcript from the "Binding" Lesson

[00:00:00]
>> Lukas Ruebbelke: So now we have covered really components at a very basic level. The next kinda step for this is templates. And so, we actually had some interesting conversations over lunch about even some of the binding syntax and what some of that stuff means. And so, this is what we're gonna dig in to next.

[00:00:27] Now, I do see a question here. Should each component have it's own module? And to that, I would say no. I think that using modules, well, so I'm presuming he means like NG Module. Or that's the question. If it's NG Module, I would say no. I would group them by, maybe feature or features, a feature set.

[00:00:54] But from there, so the question is, will I ever need to pick this up and move it? Then, that might be a good indicator that like, okay, I need to break this into a separate module. Even with routing tables, they say, break that out. Just, as you're composing things, it's better to isolate that.

[00:01:12] But as a whole, there's some varying views, but I tend to be fairly liberal about my use of NG module. Like, is this a distinct feature that I will ever need to pick up and move, or will it fall into, again, also if you're doing it lazy loading, then it will need to be in a module.

[00:01:39]
>> Lukas Ruebbelke: And yes, there will only ever be one made module, so you have to bootstrap to a module. And so, in this case, it's at module. So you always have one main module and one top level component. So that's the entry point and then from there everything else is composed.

[00:01:53] So if you can imagine kind of a component tree where really the module just kind of holds that, but then within that you have your top level component that everything else is attached to. Any more questions? Are we good? Okay, so template fundamentals, we're gonna talk about property binding.

[00:02:21] Event binding, two-way binding, local template variables, attribute directives, structural directives and the safe navigation operator for fun. This used to be called the Elvis Operator, I liked it so much more before they changed the name.
>> Lukas Ruebbelke: So it's our friend. The anatomy of a component. And so, really, we have two main styles of binding.

[00:02:54] We are binding to events to pass information in to the component, or we're binding to properties. To essentially pass information into the template. And then, between our template and out class, we have property and event in the middle. So that's very much middle of the road. And then, you have your string interpolation binding.

[00:03:19] And so, there is a question that comes up like well, where would I use property binding versus string interpolation binding? And there is this area where it kind of just doesn't matter. They say generally, if you use interpolation binding, if you're binding to a simple value, that's not going to change.

[00:03:41] But other than that, it's probably better to go for property binding. And so, really, actually binding to strings is actually the other thing. If it's a string, you need to display it, then that's where that goes. And then, two-way binding, which is essentially the combination of property and event binding.

[00:04:02] Put those together and we have a two-way street or two-way binding. So let's talk about property binding. So this really flows data from the component to an element and this is created with brackets. Now, there is kind of a long hand form to this. So if somebody's completely offended by kind of this syntax that's being introduced, you can actually do this long hand and you use simply attach bind hyphen to whatever you want to bind.

[00:04:38] So the canonical form of [property] is bind-property. I personally have never used this, but there could be some cases where you would want to do that. And as well, there are some special cases to property binding, or do you actually wanna bind to attributes, classes, or styles, and it looks like this.

[00:05:00] So if you wanna basically bind to an attribute property that doesn't exist on the element, so this happens with SVG and different things you just attach ATTR for attribute dot property class. class.className. Styles. style.styleName. And so, for instance, and example of this would be if you wanted to bind to let's say like X.

[00:05:29] The X property or the alpha property. On an element, you could do style.x, style.alpha or whatever it is opacity. And then, as this basically property changed in your component it would then update essentially that style property on that element. So this is kinda some extensions that you can do some kind of interesting things with that.

[00:05:56]
>> Lukas Ruebbelke: For instance, [SOUND]. So in this case, we just want to bind or change the color of the text within the span. So we can use style.color. This is kinda the special binding syntax. So english just having to do some additional things under the hood, but that counts for attributes, styles, and classes.

[00:06:17] So Event Binding, data from the element back into the component. So parentheses, and the canonical form of this is on-event, so on click, on mouse event, etc. And then, you can also pass, if you actually wanna pull dom information or information about the dom within itself, it's carried within the event parameter.

[00:06:50] Also, if you pass it in. So if you put something specific in there, then you can pull that out as well, but essentially Target event information's carried in the $event parameter.
>> Lukas Ruebbelke: So here we have click event, and if we wanted to pass this in, I'll just put this in here.

[00:07:14]
>> Lukas Ruebbelke: Like this. So within our component if we wanted to actually get information off the ($event), then we would just accept that parameter. And then, we could do interesting things with it. Yes?
>> Speaker 2: I have a question about can you change style?
>> Lukas Ruebbelke: So this is good for really like single properties of classes and styles.

[00:07:41] And they specifically mention this in Angular Docs. So for instance, you wanted to target for instance a single class, then you could just use essentially property binding to that. But if you need to chain multiple classes or styles then you would use NG class. And that allows you to do that.

[00:07:58] It gives you more control. And so, that's what that's for. It's this is good for really a single style. If not, then you're going to want to do NG class. That'll allow you to toggle actually multiple classes based on some condition.
>> Lukas Ruebbelke: Combination of property and event bindings, used in conjunction with ngModel generally.

[00:08:25] So this is where you're going to see this. I'm going to put this little nugget out here. That you can, first and foremost, create custom events. You can also create custom essentially attributes that you bind to, the inputs and outputs. And there is a way to create custom two-way data binding within your child component to your parent component.

[00:08:52] And so, we may get into that tomorrow when we get into component driven architecture. But, for instance, when I change this property in the child I want it to automatically update on the parent. And when I change it on the parent I wanna automatically update it on the child.

[00:09:08] And there is a way to do that. Coincidentally, by combining N input and an output with one semantic change, that will then indicate like this is to a data binding. So you do something totally custom and then when you wrap it in prints and box, then now it's 2a.

[00:09:31]
>> Lukas Ruebbelke: Here we go, so this is generally used with NG model, this is where you gonna see this. And we have a dynamic value if we type it then it will update in the bottom here.
>> Lukas Ruebbelke: So let's do, you know what, let's take one quick break and let me show some code real quick.

[00:09:58] Just so we're really anchoring this down.
>> Lukas Ruebbelke: So we go to
>> Lukas Ruebbelke: Widgets component.
>> Lukas Ruebbelke: And
>> Lukas Ruebbelke: Let's create.
>> Lukas Ruebbelke: I really like that color one.
>> Lukas Ruebbelke: Color = blue.
>> Lukas Ruebbelke: And then, a component. Does it make sense what i'm doing? I'm simply saying I wanna bind this color and style of this element.

[00:11:03] To whatever this is right here.
>> Lukas Ruebbelke: Interesting. But let's go back, and enter our code.
>> Speaker 2: Was my color set to blue in the components?
>> Lukas Ruebbelke: Yes.
>> Speaker 2: Okay.
>> Lukas Ruebbelke: So let me just put these side by side real quick. Hopefully this will. Can we kind of see this here?

[00:11:35]
>> Speaker 2: There we go.
>> Lukas Ruebbelke: So in the template. So we're just kinda freestyling here. And then, over here.
>> Lukas Ruebbelke: Let's create a method setColor.
>> Lukas Ruebbelke: Now, if we wanna just set this color, to something else, who need to, let's say capture and event.
>> Lukas Ruebbelke: Well, what we can do here,

[00:12:16]
>> Lukas Ruebbelke: Let's go click,
>> Lukas Ruebbelke: So want to catch the click event on the ch1, and then we want to call setColor('red')
>> Lukas Ruebbelke: Snap. So this make sense what I've done? I'm basically binding, I'm taking a property from my component and I'm binding it into my template so that it renders.

[00:12:50] Then, when I wanna capture an event from the template, I'm then using that to convey that event back into my component. Now, let's check out NG model. So two-way data binding, so this is where things can get interesting. Or more interesting at least. So I'm just gonna do horizontal rule and then let's do an input.

[00:13:19] And then, from here, I'm just gonna use ngModel and I'm gonna set it to myColor.
>> Lukas Ruebbelke: Now, what's gonna happen here is that you can see here in the text its rendering as eye color. It's not being evaluated. Why is that?
>> Speaker 3: You don't have the brackets.
>> Lukas Ruebbelke: Cuz I don't have the brackets.

[00:13:52] So if we go back here,
>> Lukas Ruebbelke: Let's do one other thing real quick.
>> Lukas Ruebbelke: Just so we can kinda keep track of this.
>> Lukas Ruebbelke: myColor.
>> Lukas Ruebbelke: And so, now it's being evaluated,
>> Lukas Ruebbelke: But let's see what happens. So I've just clicked it and so it changed it at the component level and it updated the input and it updated just the string interpolation binding.

[00:14:40] So then the question is when I go here and I type it, what's happening? Well, absolutely nothing because we're not actually conveying the fact that this input has changed back to the component.
>> Lukas Ruebbelke: But we can do that,
>> Lukas Ruebbelke: By making a banana in a box. [SOUND] And now what we're saying is pull the property from the component into the template, but when it changes in the template convey that value back to the component.

[00:15:20] So let's go here, blue, red, get back here.
>> Lukas Ruebbelke: So you can notice that when I change this, then it updates. Red, green, whatever. I'm actually wondering what if I go F, F. Holy cramoly. That's pretty cool. But I think really if we look in this microscope, we can kinda see what's happening.

[00:15:56]
>> Speaker 2: Caitlin was asking a question about practice of using in line style.
>> Lukas Ruebbelke: Generally I will not inline styles, this is for demonstration purposes. As well as there are cases where this would make sense if you wanted to, for instance, dealing with an SVG element. I think there's cases to do that.

[00:16:24] I would definitely not make this the bedrock of your UI experience, is binding to it. I think in general inlining styles as a whole is, I think post-production you can do some inlining in the page. But as a whole, I would not do that. I would very sparingly.

[00:16:47] So I'm not gonna start out and do that. But there are cases where dynamically you want to set something. And so, you're not actually applying it with a reusable style. And a lot of times I won't do it at the style level. But I will do it at the class level.

[00:17:03] So I've already have this predefined class that I wanna toggle. And this is much more common. So this is more of for demonstration purposes. And there are some cases where you might wanna toggle a single color. And it's so simple, then I think that would be okay. Karen, you're absolutely right.

[00:17:23] You wanna use this judiciously. And I don't know, what are some more colors?
>> Speaker 2: Medium aquamarine.
>> Lukas Ruebbelke: Is that all one word?
>> Speaker 2: Yeah.
>> Lukas Ruebbelke: Man, boom.
>> Speaker 2: Tomato.
>> Lukas Ruebbelke: Tomato.
>> Speaker 3: You can even do.
>> Lukas Ruebbelke: Wait, is that actually a color.
>> Speaker 2: Yes.
>> Lukas Ruebbelke: I thought we were singing a show tunes here.

[00:17:49]
>> Speaker 3: You can even do RGBA.
>> Lukas Ruebbelke: Really?
>> Speaker 3: Yeah.
>> Lukas Ruebbelke: Really?
>> Speaker 2: Yeah, I'm sure anything that CSS will do.
>> Lukas Ruebbelke: I mean if it's a string neither is going to evaluate it so that's pretty cool. So does anybody have any questions about what's happening in this code block here?

[00:18:11] You feel pretty good about it?
>> Lukas Ruebbelke: All right.
>> Lukas Ruebbelke: Moving along.
>> Lukas Ruebbelke: So now we can see that when we change NG model, it's going to update dynamic value, which is going to update the component. And because we're now binding here in the span it's going to update it at the bottom, as well.