This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Binding Component Data to Templates" Lesson
[00:00:00]
>> Lukas Ruebbelke: What we want to do is we want to build and work on this. And so as I do this, I'm going to talk about the structure of a component. I'm going to talk about property binding, event binding, and also some of the structural directives and how to do things within your template, and some of the functionality that's provided from Angular.
[00:00:25] So if we go into our,
>> Lukas Ruebbelke: Projects.component.ts, let's talk about the basic structure of a component. So in Angular everything is a class. For the most part, 99.9%, everything you do is going to be a class. In the case of our ProjectsComponent, notice export class, ProjectsComponent and we're implementing an interface.
[00:00:57] And so if it's a service, same exact thing. It's export class Projects service whatever. So everything at the core is a class, and then we use this metadata to essentially decorate our class. And this is where Angular gets attached to this, and so I'll talk about this more tomorrow.
[00:01:18] And so I'll talk about this tomorrow, but when you're testing an Angular component or a service, you can test it in isolation in just the class itself, or you can use the Angular utilities. But in this metadata, we can tell Angular this is how we want to hook this class into our application.
[00:01:40] And so notice that we have our imperative logic in ProjectsComponent, so this is our logic. But then we have, well, we're connecting it to a template. So, this is where we're saying this component gets compiled with this template. We're also able to attach a style sheet. And so everything is fairly self-encapsulated.
[00:02:05] And one interesting and important piece, is that you'll notice the selector. And so this is how, other than routing, how you get a component into your application. And so, if we go to back to our app, component.html, down here you'll notice it's app-projects. And so when you want to put a component into another template as a child component, this is where the surface area is.
[00:02:36] So when you think of child component, parent component, the surface area is the template. And kind of that, the doorway or the kind of the gateway to that is the selector.
>> Lukas Ruebbelke: And so in our projects.component ts, let's start to build some of the cell.
>> Lukas Ruebbelke: So when you create a property or a method on the class, it is now available for binding in the template.
[00:03:17] So for instance, if I created a property and I called it hello, and I assign the value to world. And this is going to be fairly simplistic that, let's go down here. You can actually put this anywhere you want, but I'll put it right here in this first h3.
[00:03:43] You can then render it with double curly braces. So this is basic string interpolation. So if I go here, we go back here, you can see hello world. You guys are stunned, I know. But wait, there's more.
>> Lukas Ruebbelke: We'll take this off, and let's put something a little bit more interesting or non-trivial.
[00:04:15] So what we can do here is we can go to projects, and we can just create an array. And then within here I'm sitting here thinking like, I'm gonna be typing forever. Well, fortunately I have a snippet here.
>> Lukas Ruebbelke: And I'm just going to copy this.
>> Lukas Ruebbelke: And so what I've done is I've just pulled the projects out of that snippets file and we now have an array of objects.
[00:04:50] This is going to be or present significantly more opportunities then binding to a single string.
>> Lukas Ruebbelke: So what we can do, and I'll put this just above the list.
>> Lukas Ruebbelke: Is what happens if we go and we just bind to this here?
>> Lukas Ruebbelke: Refresh the page. That's not super helpful, this kind of two string, super.
[00:05:26] Pro tip, right out of the bat. So this is, I use this all the time. Pre,
>> Lukas Ruebbelke: Projects, and then we're going to introduce what is called a pipe. This is just a essentially the pipe symbol, and what this does is it says take this output or whatever is outputted out of this, and run it through this pipe and do something else.
[00:05:50] So this is from bash if you do history, pipe grep, it's the same as anything. It's just piping the output from one into another, which then gets outputted out. So here, we'll do projects | json. This is quite possibly one of the most useful things, when I'm actually developing, it's like, I think I know what's happening.
[00:06:15] I guess not. And you can see here that now we can dump this out. So, a lot of times when something goes wrong is you're making assumptions about a data structure or that your assumptions about the state of where it's at or what is happening is one time is erroneous.
[00:06:31] It's very handy to be able to just say I have this thing and I wanna just dump it out. Now.
>> Lukas Ruebbelke: That's okay but not incredibly useful other than saying hey, what just happened? What we can do though, is because we have a collection of things is we can iterate over that collection.
[00:06:59] And so we'll use what's called a structural directive. And so this is ng for, anybody is used, so this is kind of a variation of the AngularJS one which I think was ng hyphen for, that we can now go and say let project of projects,
>> Lukas Ruebbelke: And now this is available as a variable scoped to this element, and so we'll go project.title, and we'll also go project.details.
[00:07:39] All right. Save this.
>> Lukas Ruebbelke: Lo and behold, so instead of just binding to a single object we're now able to write the template over and then loop over using ng4.