This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Component Fundamentals" Lesson
[00:00:00]
>> Let us jump into component fundamentals. So we're gonna go through just a few slides. And then we're gonna get back into the code. So components are the fundamental building block of your Angular application. And when you understand components, I think on the surface, they're deceptively simple. But what's interesting is it really informs your architecture and I'm really wanting to like jump ahead and start talking about component driven architecture.
[00:00:45] But we're just going to practice restraint and we're going to take this slow, methodical. And I would say one of the big things that I will bring out, and I'll talk about this a bit later, is that there's been a fundamental shift in, I think the mentality of all frameworks around components.
[00:01:07] And before when you're doing like jQuery applications, there really was no structure. There was no mechanism for, I'm creating this state and I wanna use it over and over and over. And really even in AngularJS there was a very little, just a hint of that but not really.
[00:01:28] Then react came and I would say I think one of the greatest things that that react did is really put component-driven architecture at the forefront of people's minds and how they think about building front end applications. And so with Angular, components became front and center. And this is anything that a user sees.
[00:01:56] It goes into a component. And so let's talk about components. We'll talk about the anatomy of a component and we'll start to build on it. So the anatomy of a component is it's fairly simple, that you have two main parts, is you have a component class, which is just a yes six class.
[00:02:28] That's it, as you define the class. And then you export it, so it's available. Then you have an HTML template, nothing more than HTML. And so kind of in and of themselves that there's nothing Angular specific about them until you introduce metadata. And what that does is that decorates the class and tells the class this is how you're going to operate in the context of Angular.
[00:03:01] So it kind of is responsible for gluing the template and the class together. And then from there, we use property bindings and event bindings to communicate from the class to the template and from the template to the class. Now I do wanna say this. And I'm trying not to get on a Soapbox here.
[00:03:25] But a lot of times, a fundamental pitfall that I see when people come from a very classical learning environment, for instance like Java is a really, really, I think kinda one of the main perpetrators of this is that when you see class or you see a class, it's this opportunity to inherit it an inherit it, inherit it.
[00:03:51] And I think that's a very slippery slope and I was really resistant because I prefer functional programmatic concepts is I was resistant to even just having the concept of a class in JavaScript. But what I began to realize is just because you have a class, that doesn't necessarily equal inheritance.
[00:04:13] And so because we're using classes, think of those as just like a container mechanism, a place that you can kind of put things.- I'd really think of classes is a data structure. And so what I have seen in some client engagements is you take a Java or .NET developer who's learning Angular, and you'll see a component that's inherited from another component that inherits from another component which now what you're doing is you're tightly coupling everything together.
[00:04:43] And when you make a change to one class upstream, it has adverse effects downstream. So classes I just recommend really staying away from inheritance. I think that's a really, really slippery slope, but as an organizational mechanisms or really I think of it as a data structure, it's actually quite nice.
[00:05:05] So what I want to call out here, again I'm trying to avoid the slides cuz I just wanna do code, I wanna jump into the codes. So let's let's look at the code that we generated or rather let's hop into our start branch, because we're gonna start building, let's do that.
[00:05:31] So this angular workshop project that I generated, I'm not gonna throw it away, but I don't need it. So instead, I'm just going back into the Angular nine fundamentals, and I'm on the start branch. So hopefully you've downloaded the repo and let's hop into 00 start. And let's start to just kind of step into the code, if you are not on 00 start branch, so I'm gonna hop back into master.
[00:06:12] So get checkout master. Oops, ha, there we go. All right, so you can see, I'm on master. And so per chance it's like, well how do I get onto the start branch? You're just going to go get checkout 00 dash start. And so my apologies in everyone to assume prior knowledge.
[00:06:39] So now you should be on the start branch. Okay from the start branch, we can hop into the code, which is I'm using VS code as my editor and, Let's start with the component class. So what I'm going to do, the narrative arc that we're going to follow is I'm going to start with a class.
[00:07:14] I'm going to explain what's happening kind of the pieces. Then we're going to hop into the template, and I'm going to explain how that works and how that's wired together. And then we'll start to build on that. So in our app component, what you have is, You have a class here, and then you have this decorator.
[00:07:41] So I'm just going to delete this for just a moment. And at this point in our app component, outside of this import at the top, there's nothing Angular about this. And so it's really interesting that you can actually write a lot of just TypeScript classes or a lot of times I write functionality in TypeScript, and then I just move it into Angular.
[00:08:06] And so we have properties, methods, etc. And then on top of that, we have our metadata. And so what the metadata is, is it is a function, so this is actually part of TypeScript, it's not Angular, that it's a function that gets called and you can actually create your own decorators that when it's being compiled, it hits this decorator right here.
[00:08:43] And it then calls this function passing in this parameter, which in this case is a component configuration object and then it performs some functionality. And so within this component decorator, we're going to tell angular how we want to decorate this class to make it available or to make it function as an angular component within our application.
[00:09:10] So the big one is the selector. And so in this case, we're gonna app route. And what this does is by your selector, you're able to attach this component into the DOM. And so if we go to index.html, you'll notice here that we have app root, this element here, so this is obviously not a standard HTML element.
[00:09:40] But because we're defining it here, and when it compiles, we now are able to add that to our application. So the question is how do I get a component into an application? Well, via the selectors, so you take the selector and then you're able to just add that like a normal HTML element.
[00:10:04] Now the other few things I'll add is the template, which is gonna be app component.html and style URLs. And so this is interesting because this is an array and you're able to actually stack your styles. I've never had a reason to do that in reality, but it is an option.
[00:10:32] And so the thing with component classes is if you understand JavaScript and especially ES6, I think your understanding of the components themselves are pretty straightforward, like you're there. It's a very short leap, because we're leveraging essentially the native mechanisms of JavaScript and TypeScript. And then in our component, what we have is just an HTML, and you'll notice here that we have these elements, mat hyphen toolbar, etc., and these are just us pulling in Angular material components into our application.
[00:11:28] And so this is how again you essentially get a component typically to render. Now you can do this via routes, that is another way to do that. But more often than not, you will put a component on the page via the app selector. So let me just run this real quick.
[00:11:51] So hopping back into the command line, it's npn run server all. Remember, the reason why we're doing that is because we're running like a small note server with a REST API in the background that we will use eventually. And so as this is running, once this pulls up, then we'll hop into the page and we'll start to see this.
[00:12:18] And then I can start to kind of add on to this and we can kind of step through this. So, compiled successfully. I'm gonna hop into the browser. And let me create a new window here, okay? There we go.