Build Web Apps with Angular 2

Build Web Apps with Angular 2 Property, Event, & Two-Way Bindings


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 "Property, Event, & Two-Way Bindings" 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:

Scott compares property bindings to event bindings. Property bindings flow data from the component to an HTML element. They are created by placing square brackets around the targeted attribute. Event bindings flow data in the opposite direction. The requested event is wrapped in parentheses and the statement to execute is provided as the event value. Two-Way bindings are a combination of both property and event bindings.

Get Unlimited Access Now

Transcript from the "Property, Event, & Two-Way Bindings" Lesson

>> [MUSIC]

>> Scott Moss: Property bindings flows data from the component to an element reated with the brackets. So does that look like valid HTML? I mean, have you ever seen it? It's valid. [LAUGH] Yes?
>> Speaker 2: So classes has nothing to do with Where you-.
>> Scott Moss: No, this-
>> Speaker 2: This is just straight up just taking the property and putting it into-

>> Scott Moss: This is taking some value from your component and binding it to the, yup, to the template, yeah. This is, now I want to bind some property from my component to a property on an element, so property binding. Use the bracket syntax like this, so bracket and then the property of the element you want to buy into.

[00:00:50] And then, on the right is the property in the component that you want to use as the model for that. So you can use the bracket, you can also use the bind attribute like that, the name of the attribute. Either way will work, but I recommend using the bracket.

>> Scott Moss: So that's gonna be, yes?
>> Speaker 2: Just cuz, I mean, for some reason I'm still having problems wrapping my head around Around the different, the new bindings so with the second line there, image.src. It's assume that on your component, you have something called image which is an object.

>> Scott Moss: Yap.
>> Speaker 2: That has a property name source.
>> Scott Moss: Yep.
>> Speaker 2: Just to make sure I got the right.
>> Scott Moss: So like the views angular one, this will look like ng src equals image.src.
>> Speaker 2: Yeah. Cuz I'm not seeing the curly braces.
>> Scott Moss: Right. You're not seeing the curly braces Yeah, so that's a model right.

[00:01:45] So the interpretation of curly braces are really only going to be used in the content areas. But on the actual areas it's mostly going to be this. So, when there is no element property, prepend with the attr. So again, colspan that's an example of an attribute. So there are some things that Angular allows us to bind to attributes like style and class.

[00:02:11] And we'll get to that in a minute but mostly it's property bindings. So, don't use the brackets if the target property accepts a string value. So in Angular, you'll have a hack where like I should show some code example. But pretty much, if it's just a static string, you don't need to use the brackets.

[00:02:31] Just put the string in there. I mean, this thing is never gonna change. It's just a static string. We're just initializing a value for this property of this element. If we were just gonna put a static string for the source, we don't need to use property binding. Just put the string in there, right?

[00:02:46] The string is a fixed value. Again, if it's just not gonna change, we can just literally hard coat it right into the template. Again, we don't need property binding. And again, if the initial value never changes. So this is never gonna change anywhere in our component, there really isn't any reason to bind it to the property and that' t for the first place.

[00:03:02] Cuz it's never gonna change. Just put the value in the template this is gonna speed up change detection and make things a lot better.
>> Scott Moss: Yes?
>> Speaker 3: So you're saying on that first one, you would just use interpolation instead?
>> Scott Moss: No, so like, there's, so what most people would do is, can we save it?

[00:03:19] It's better when I show you the code, it's kind of hard to explain. But it's like a hack that I'm guilty of doing in Angular 1, and I've done in Angular 2, but it's just like, why am I doing this? It doesn't make any sense. You should just use a string.

>> Scott Moss: Cool, so here's an example of actually binding to an attribute. We're binding to the style attribute, and we're changing the color of the style with this expression on the right called componentstyle. But it's the same syntax if this was a property as well. But this is one of the small, on of the things that Angular allows as to bind to as far as attributes and it's the style class.

[00:04:01] I guess id technically that's an attribute but it's also a property. So, yeah. And obviously component styles can be dynamic, it's gonna change so that's why we're binding it here. If it was never gonna change, we wouldn't do this.
>> Scott Moss: Make sense? Okay.
>> Scott Moss: Event bindings. Okay, event bindings work the other way.

[00:04:24] Now we wanna respond to an event. So the difference between event bindings and the interpolation and the property bindings is event bindings use statements, whereas interpolation And property binding, you use expressions. A statement responds to an event, and expression sets a value on a target. So, just remember that.

[00:04:48] So, event binding, you're making a statement that's responding to some type of event. And the event can be any DOM event on that element. Or a custom event that you made yourself. So in this case, the button, we're using this parentheses syntax here, which means we want to combine the foo statement that's in our component to trigger when the click event is fired on this button.

[00:05:11] So the equivalent of Angular 1 is ngClick Ecos is Foo. It's pretty much doing the same thing. You can also use the on-event name, which also works the same way, if you don't want to use the parenthesis.
>> Scott Moss: And that's gonna create like this logoscope, just like Angular, so we get access to the event itself, use the exact same syntax $event.

[00:05:38] So we can pass that in and use that event inside the statement of foo if you wanted to. So very similar there. So the only really difference is they got rid of ng-click and now you can say on the event name, any event. Or you can just use parenthesis any event instead of built in direct as what they made.

[00:05:57] It literally binds to any event, which I think is awesome. Any questions on this? Alright, that's what im talking about. Cool. So heres an example of it. So when this button is clicked, alert the world [SOUND] done. Tell the world I clicked a button, yes?
>> Lukas Ruebbelke: There's a question.

[00:06:19] In Angular 1, it's recommended to use the dot syntax, like Is this practice applied in Angular 2?
>> Scott Moss: We don't have to because they're all scoped already. So we don't have to name the controllers that way. This template's already scoped to a component. So we don't have to use, it's already implied that we're in the context of the component itself.

[00:06:42] So we don't have to use the controller as name anymore.
>> Scott Moss: So foo() that means there' a prototype method called foo() on the component that this template belongs to, that's what that's saying right there. So in Angular world, that would mean inside your controller you'd had equals Something.

[00:07:04] That's Angular 1 and Angular 2 we just put on a prototype, which is the exact same thing with ES6 classes.
>> Scott Moss: Cool. Two way bindings are literally just the property bindings plus the event handling at the same time. You can send data in, data comes out. So it's just a combination of the two, used in conjunction with ngModel, of course.

[00:07:30] Like I said, ngModel makes sense for forms, two-way data binding makes sense for forms. It's really the only time I use two-way data binding these days. Yes?
>> Lukas Ruebbelke: There's a question, can you bind to multiple events? Going to the same function.
>> Scott Moss: Yes, you can bind to multiple events.

>> Lukas Ruebbelke: Yeah, so can you put like click, drag in there in parenthesis.
>> Scott Moss: Yeah, you can put. So these are statements, so statements allow you to put like other functions you want to do where the expressions won't. So you can do that, you can also just wire up then again I write it twice so you can totally do that.

[00:08:07] But, will that stay the same? I don't know. We'll have to see, but you can totally do it. I think if it gets to the point of doing that it's really tough to test, really hard to figure out what's going on. So I would recommend not doing that.

[00:08:22] Instead of everything you wanna do, try to fit into one statement and just call that one statement versus trying to do multiple statements in a template. Then it just gets crazy like when I click this button, here's these all things I'm gonna run when it should be just one thing.

>> Lukas Ruebbelke: So moreso, it's actually the other way around, you have one statement that gets called by multiple events.
>> Scott Moss: Yes.
>> Lukas Ruebbelke: I'm gonna try that out on Aplunk and see what happens.
>> Scott Moss: So Lukas refers to this as a hotdog in a box.
>> Lukas Ruebbelke: I didn't come up with that.

>> Scott Moss: You didn't? Who came up with that?
>> Lukas Ruebbelke: Someone on the Angular team. It looks like a hotdog in a box.
>> Scott Moss: To me, it looks like a basket.
>> Speaker 3: I heard banana in a box.
>> Scott Moss: Banana in a box, it just looks like something you hold from Handles that what looks it feels like handle bar handle bars like this.I don't know but to me it looks like grocery basket or something.

[00:09:13] But anyway, that's what is combination of the two. Parenthesis, event binding, brackets, property binding boom, both of them done.
>> Scott Moss: So that way we get in and out of that NG model right there. An ngModel is a directive. That's built there.
>> Scott Moss: Cool.
>> Speaker 6: Is ngModel the only thing that can use the hot dog in a box?

[00:09:41] Subtext.
>> Scott Moss: No no.
>> Speaker 6: [CROSSTALK] Own directives [CROSSTALK].
>> Scott Moss: It's not the only one. You can make your own. There are other built in ones. Most of them roll around farms. Most of them roll around some type of input because you want to, you need the value to be dynamic, but you wanna also wanna be able to set the value.

[00:09:58] So it's using around inputs and on the other side you can actually get around this without using ng model two. You can use uni directional just like you would in like react. You could, react has two data binding for their inputs, we can also do it you know directional and not do that way.

[00:10:13] So it's solely up to you how you wanna do it. Well, I like that this option is in here. It's pretty cool.