This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Component Data" Lesson
[00:00:00]
>> And so I'm going to take this back out. And now let's step into our home component. So I'm gonna just close some of this down and in our home component let's look at these elements again. It's a class. It implements this interface. I'll talk about this in just a moment.
[00:00:32] And it has properties and methods. As well as we're defining our selector, template URL style URLs. So you're going to see again this pattern over and over and over. And so now when you are attaching [COUGH] in a way, I want small point to make about the opponent.
[00:01:03] But for the most part, from a component class standpoint, there's really not much to say other than when you attack or when you have a property or method on your class. It is available to bind to in your template. And so you'll notice here we have this course lessons array with just a basic object with a title.
[00:01:35] And so, [COUGH] if we go into our HTML, We have just a basic card here and we're not doing anything yet. But what I can do, and I'm just gonna start and I'm gonna show you probably one of my favorite debugging tricks right out of the gates. So if you use a pre tag, you can then use these curly braces to bind to an object.
[00:02:12] So in this case, It is course lessons. I think that's it. Let me double check. There we go. And then I'm gonna do a pipe and I'm gonna do Jason. And so what's going to happen here, it's going to take the course lessons array, and it's basically going to stringify and it's just going to dump it into the page.
[00:02:44] And so if I go back here, refresh this, let me change my route. So we're actually on the home component. There we go. And so this is really, really handy [COUGH] ,for if you are troubleshooting, like, I'm expecting this thing to happen in my component or my template, and I'm not seeing it.
[00:03:06] Well typically the first thing that I'll do is I'll just dump out an object. And so we kind of went straight for the, like let's bind to this object in the stump out, lemme elaborate on that a little bit further. [COUGH] So, I'm gonna create another property on here and I'm gonna call it welcome message.
[00:03:32] And I'm gonna just go Hello workshop, okay? [COUGH] And now because that's a property, I can now bind to that and so I'll just create an H3 tag and we'll go welcome message. I'm gonna save this. You'll notice here it's now rendering in the page. And so this is the simplest form of binding in angular, which is your curly brace binding is that there's something in your component class that you wanna render in your template, and it's just a string.
[00:04:20] So for instance, I did have a workshop here, but what I could do is go back into our component and I could go title like so. And in the title here I could just bind to it that way, I'll back in the code, and you can see that it's still rendering.
[00:04:47] So in our component class we have properties methods that are now available to us to then bind to in our template and they're exposed. [COUGH] And so, that is the simplest form of binding, is the curly brace binding.