This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Binding" Lesson
[00:00:00]
>> Lucas Ruebbelke: So template fundamentals, if a component is just an ES6 class, then a template is, for the most part, all intents and purposes, just HTML.
>> Lucas Ruebbelke: And we're gonna spend most of our time just discussing the different types of bindings. And then a few little other things to help us lay out the best templates we possibly can.
[00:00:29] Namely, structural directives, attribute directives, and kind of go from there. So this is going to be the high level tour of templates.
>> Lucas Ruebbelke: So we have seen this graphic a few times, I hate to break it to you, we will see it a few more times over the next couple of days.
[00:00:53] The one thing I'm missing, I'll put this back in, is that there's some arrows that kind of indicate the circular structure. But template, metadata, class, so this is just, I just think it like a kind of a sandwich, if you will. You've got two pieces of bread, and then the metadata just kind of sticks them together.
[00:01:12] But what's important is to understand event binding and property binding.
>> Lucas Ruebbelke: And so between our template and our class, we have string interpolation. It's pretty simple, you have a string and you just want to render it. Property binding, which you have a value in your class you wanna put on your template.
[00:01:36] And then you have an event in your template you wanna capture, communicate it back to your class. And then you have, or you wanna actually do it both ways.
>> Lucas Ruebbelke: So before we go any farther, let me, just wondering,
>> Lucas Ruebbelke: Let's just do a quick live demonstration, I feel like freestyling a bit.
[00:02:07]
>> Lucas Ruebbelke: Let me get my chair back and we'll just see these. It'll take maybe five minutes and just kinda walk through some of these, so.
>> Lucas Ruebbelke: Let's go and,
>> Lucas Ruebbelke: I'm going to create a color property.
>> Lucas Ruebbelke: And I'm going to give it a color or a value of blue.
[00:02:40]
>> Lucas Ruebbelke: So now if I go in here,
>> Lucas Ruebbelke: If we just wanna render this as a string, all right, so color. You know what, let's do,
>> Lucas Ruebbelke: Like so,
>> Lucas Ruebbelke: I think everybody probably expected this, just a string, put in the template, curly braces.
>> Lucas Ruebbelke: Now, what we can do is,
[00:03:29]
>> Lucas Ruebbelke: And I am doing this off the top of my head, so hopefully this doesn't explode in my face, if not, I'll fall back on my slides. Let's change this to something a little bit more prominent.
>> Lucas Ruebbelke: So now what we're doing, I'm actually surprised that worked, but I'm just going to pretend like I knew it was gonna work, is that we're binding to this color style.
[00:04:03] And we're saying, whatever this value is, render it and assign it to this property. This is why this is called property binding. So here we're just rendering it as a string. But in this case, the value is being assigned to the property.
>> Lucas Ruebbelke: Now what we can do is,
[00:04:31]
>> Lucas Ruebbelke: Let me just borrow a button from somewhere.
>> Lucas Ruebbelke: I think it's in here.
>> Lucas Ruebbelke: And we already have a click in here
>> Lucas Ruebbelke: And I have a method called echo, doesn't exist yet.
>> Lucas Ruebbelke: And let's just pass in color, so then within our component, remember, methods and properties, if they exist, they're available for binding.
[00:05:20] So we'll go echo, and we'll just say message, and we'll just log this out.
>> Lucas Ruebbelke: Pretty straightforward, I think the complexity of this class is kind of JavaScript 101, intro to JavaScript properties and methods. And so now we're saying, when this button is clicked, we want to call echo.
[00:05:56] And we wanna pass in color, which is the property on the class.
>> Lucas Ruebbelke: So we'll flip back here.
>> Lucas Ruebbelke: And you can see here that it is rendering. It's calling echo and it's just tracing it out, okay, so far so good? I've put a property on my class, bound to it in the template.
[00:06:22] I created a method on my class and I'm calling it from the class. So what we're doing is, we're just capturing that user event and saying, when this happens, we're going to trade it for this action, and we're gonna use it to call this method. So this is event binding, this is property binding.
[00:06:47]
>> Lucas Ruebbelke: Let me borrow one more component,
>> Lucas Ruebbelke: And,
>> Lucas Ruebbelke: We'll go here.
>> Lucas Ruebbelke: And this is where I think things get interesting. So I don't need the placeholder, but what I wanna bind to is color.
>> Lucas Ruebbelke: So now you can see that,
>> Lucas Ruebbelke: Because color is, the value is blue, It's showing up here, it's turning this blue.
[00:07:35] But then it's also rendering here as blue, but what if we type in red?
>> Lucas Ruebbelke: Or, I'm guessing here, violet, maybe? So as I change this, you can see the two-way data binding entry model is rendering it. It's writing it back to the class, but let's go, anybody know of any other colors, grey is boring.
[00:08:10]
>> Speaker 2: Green.
>> Lucas Ruebbelke: Green.
>> Speaker 2: Aqua.
>> Lucas Ruebbelke: Aqua.
>> Lucas Ruebbelke: And so as I type this in, it's updating over here. But because we're also binding that value to a property, it's actually changing the color of that h3 tag, or whatever I had. So just think of properties into the template, events come out.
[00:08:35] And this is, for the most part, the majority of what we'll do in our templates. So I've kind of just circumvented all my slides for the demo, so let's just kind of walk through these, and then we'll see where the wind takes us. So flows from component to element, so an image tag would be a good example, binding to source.
[00:09:01] And so this is essentially, just think of, if I want to write a value to a property in the template.
>> Lucas Ruebbelke: There's a canonical way to do this using bind-property. If, for some reason, you have some standard or something that you don't wanna do the brackets in there, there's a way to do this long hand.
[00:09:19] I'm lazy, I recommend not, if you can get away with it. What you saw here was attribute.property. So that's when I was doing style.color, or actually no, no, I was doing style.stylename. And so you can actually bind some kind of some interesting kind of subproperties of things, such as classes, attributes, etc.
[00:09:45]
>> Lucas Ruebbelke: And so we saw here, style.color, the cat's out of the bag, this is kind of anti-climatic. So event binding, same thing, a button click is the event, yes?
>> Speaker 2: So if you wanted to do multiple styles, would you do style.otherstyle.
>> Speaker 2: That's I think how you would do it.
[00:10:07]
>> Lucas Ruebbelke: But if I was doing multiple styles, it kind of depends on the nature of it. The next thing I would say, could this be encapsulated in a class? And then possibly just binding to the overarching class. So I mean, it really kind of depends, but I think that's how you would do it is style.whatever, style.stylename, and do it that way.
[00:10:27] Cuz you may actually wanna manipulate that element on two dimensions of, let's say, size and color or whatever, and that's totally fine.
>> Lucas Ruebbelke: So again, canonical form is on event, and the one thing with an event handler is that you can actually pass the event using $event. So let's say you're actually doing a mouse click, and you care about the xy position of the mouse on the page.
[00:10:56] Well, you pass that event object in, and you can actually introspect it. And so it's just a data DOM event that's passing out, which is pretty neat.
>> Lucas Ruebbelke: So you can see here, alertTheWorld, just passing in the data DOM event.
>> Lucas Ruebbelke: Two-way data binding, no surprise here, boom, you're taking the two bindings, you're putting them together, and now you have two-way.
[00:11:22]
>> Lucas Ruebbelke: There are a few advanced cases I recommend looking up. Once we get into component-driven architecture, I'll talk a little bit more about this. So ngModel is one such directive that is enabled for two-way data binding. You can create your own custom properties, if you will, have it be two-way.
[00:11:47] We may talk about it tomorrow, but there are ways to stem this even further.
>> Lucas Ruebbelke: You'll see this mostly with ngModel, but you can create your own custom to a data binding properties as well.