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

Check out a free preview of the full Angular 9 Fundamentals course:
The "Property Binding" Lesson is part of the full, Angular 9 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas explains that property binding is from class to template, demonstrates how to display data from the component into the markup using Angular templates, and uses a popular debugging technique that involves the JSON pipe filter.

Get Unlimited Access Now

Transcript from the "Property Binding" Lesson

>> We have property bindings, event bindings. And both of these are unidirectional, meaning they go one way. And so this is a pretty handy way to think about this, is from our class, if we just want to put a value and render it as a string, we can use it, just the the curly brace binding or string interpolation binding.

[00:00:25] But if you want to pass, let's say an object into your template, then you use property binding. But what happens if something happens in your template that you wanna surface back into your class? Well, that is event binding. Now, Property binding is from class to template. You're passing in essentially data into your template.

[00:00:56] Event binding is from your template to your class, and what happens if you need actually be two way? Well, what happens when you take two one-way streets going the opposite direction and put them side by side? Well, now you have a two way street basically. And so on the bottom here, this is where you have kind of this two way data binding via ngModel.

[00:01:30] And so let's kind of expand out on what these look like. So I am just gonna move the slide back over to the other monitor. And we'll, we can kind of expand on this a little bit. All right, from here, Let's think of something that we could pass in.

[00:02:01] This is gonna be a little bit contrived, but it's gonna kind of get us started on this. So I'm going to create a span tag, and within this, I'm going to bind to essentially color. So I wanna set a color property on here. So style.color =, and which is called the themeColor.

[00:02:35] This doesn't exist yet. And we'll go, some colored text! Now what we need to do is we need to copy this property into this and let's just go with blue, All right, let me save this. And we'll go back into our browser. And notice here we have some color text, and it's blue or shattering.

[00:03:16] So obviously, we can change this to red or whatever. Now, let's red, and, So what we're doing is we're saying I want to bind this property on this class to this attribute, or this element in the template. Now this in of itself is not too impressive. So let's go in and we'll hop over to Angular Material.

[00:03:53] And I'm just going to grab a input. So here, We're just gonna copy this and we'll go back here. We don't care about placeholder. But what I want to do is I want the ability to bind to the themeColor and I want to be able to update it.

[00:04:36] So themeColor, I'm gonna save this. Theme color save this, then we go right back here and we check my bottom here, did I throw an error? No, well, okay. Let's go back in here, And put ngModel.
>> Perhaps the form module is necessary, I don't know if that's-

>> Yes, yep, yep, yep, yep, yep, there we go. And so the form module was missing. So you'll see here I'm actually throwing these errors. This is why. So this is actually a good opportunity here is, what happened? So I'm trying to essentially do the forms. And if I had had my terminal up, I would have seen this immediate, and like I can't buy the ngModel.

[00:05:42] It's not a known property of input. And so how that happened is I am trying to essentially add form functionality and I have it imported, the form module. There we go. So, forms module. And what this does is now that I've imported it coming from Angular forms, let's go back and make sure, so it's compiled successfully.

[00:06:11] Let's hop back into the browser and let's make sure that it's there. So refresh, Double check, And we'll go back in here. Let's just restart the server. And one other thing that I may be doing here, let me check, That module, forms module, we're good. All right, let's compile successfully.

[00:07:07] Input themeColor, themeColor, text, let me just move this off to the side real quick. All right, let's go here. There we go, red, so I feel like this could be a little bigger. All right, let's put this back. Whoever called out the forms module, bless your heart. I'm gonna save this.

[00:07:35] And, Austin, I heart you, I love you. Thank you. If I wasn't hanging with friends, I would be really bothered right now. But now what I can do is I'm changing this from blue to black to, I don't know. Let's me see that. I was gonna do turquoise, but [LAUGH] I think I'm taking my life in my hands at that point, magenta.

[00:08:09] And if we go back to here, let me do just the string binding here. So, ThemeColor here, I'm gonna put a horizontal rule just to kind of break this up. All right, save. Let's go back here. What I think I'm gonna do just to make this a little easier, I'm gonna just put this in, there we go, all right.

[00:08:41] And so now you can see I'm doing string binding here, and it's just saying it's red. We're binding this property to the attribute and so it's actually rendering as red, and then in here, it's putting it into the input. So if I go here, notice that when I type it, it's showing up over at the top, just because we're changing the property on the class.

[00:09:11] And then the minute that it turns into something that the template recognizes, we are good to go. So then if I go green, there we go.