Transcript from the "Components" Lesson
[00:00:00]
>> Let's talk about Component Fundamentals, which is kind of a, really it's a multifaceted piece. But it is the, I think, when you're looking to get into Angular, so this is I'm freestyling here. That if, as a junior developer; somebody understood how to generate and build basic components.
[00:00:26] You, in my opinion, are in a place to be paid for that service. And so this is, what's pretty interesting about, just talking about components is that I've seen some very junior developers, brand new to programming. And they are still learning how to do state management, and Graph QL, and all the hard stuff.
[00:00:53] But they were rock solid in creating components, and I was able to use them immediately. And I've seen junior developers effectively used on projects because they were able to go and build out the component layer. And so, in an Angular application, obviously, we have various levels stacks degrees of complexity, but being an opportunist that I am, that everything that I do in the back of my mind is, I'm asking myself, can this provide value that's the Mark Urbanski question.
[00:01:33] And then the Lucas Rubik key question is, can I convert this into money? And so the CLI is essentially a micro money printer. But by extension of the component, being able to generate components for people looking to get into development, this is a great place to start, in something that is valuable and can be utilized almost immediately.
[00:01:58] So with that said, let's get the party started. Component Fundamentals. And so, we've seen this slide in a previous life, but the anatomy of a component is pretty straightforward. You have a component class, you have your template that is wired together using metadata which is very, very simple in most cases.
[00:02:28] And then outside of the structure piece you have the communication channels, which is facilitated via binding, event binding and property binding. Now, just as much as I said the Angular CLI, exclamation point equals, equals, in other words, strict inequality, it does not equal a crutch. I want to be very adamant, that using classes, i.e, component classes, this does not equate to inheritance.
[00:03:07] And so for me, I prefer functional style programming. And when I have an opportunity to program in a functional style, that's what I'm going to gravitate towards. In JavaScript, believe it or not, even though it looks like Java, it is a lisp in wolf's clothing. Is that JavaScript is a very dynamic functional language, you can do some really cool things with it.
[00:03:37] You still can do cool things with it. But my reservation when ES6 was coming along and TypeScript, is that if we introduce classes, it's going to pave the way for inheritance. And I think that inheritance is a very, very slippery slope because of the level of indirection and coupling that it creates.
[00:04:06] So just because we're using classes, if you're coming from Java and you have an inheritance fetish or C sharp, resist the urge to use inheritance and instead favorite composition. What I recommend is that, actually if you go read any design pattern book, they talk about favor composition over inheritance.
[00:04:31] That as an organizational mechanism, a class is fantastic, as a mechanism to inherit functionality from something else, be very, very careful. I do not recommend doing that and avoiding it at all cost. You can achieve the same thing via composition, and it's a lot clearer what is happening.
[00:04:56] So with that said, when you have a component, you have a component class. And so the beginning of a class is an ES6 class, and properties and methods on the component class are now available for binding in the template. So the first thing you do is you define your class, so in our case export class items component.
[00:05:22] The next thing that you do is, you're going to import the core Angular dependencies that you need to make this a functional component. So obviously, component from core is a big one. But any third party dependencies, any custom dependencies, you need to bring those in, and I recommend pulling in just what you need, and not all the things.
[00:05:51] So what this does is if you have a dependency or you're pulling in dependencies, be very explicit about that. A very good example of where not to do that, and I don't believe you can anymore, but for instance, RxJS has like 150 operators. Well, at one point, what you would do is import star from RxJS.
[00:06:15] And even though you're using maybe two operators, you've just imported the whole library, and that's very, very inefficient. So I recommend, be very explicit about what you're using, and import just that. So here, import component from Angular core, and then you will decorate the class. So this is where the metadata comes in.
[00:06:42] We turn our class into something that Angular can use by decorating it with Angular specific metadata, surprise. So @Component, and we can also as I said, we can decorate our properties and methods. So the two most common ones are input and output. And so here we're saying I have this component class, and I wanna decorate it, or essentially Angularfy it by adding in a selector, that Angular can then use to attach it to a DOM, the template URL and style URLs.
[00:07:21] And then from there, you need to expose this component. So we declare it, we add it to the declarations array in the appropriate ng model. So in this case, we're doing an app module. But we would add that to the declarations array, so that once it's declared, then it is now available for use And as I said, when you have properties or methods on a component class, that is available for binding.
[00:08:02] So in my template we'll see this in a little bit. I could actually bind to items, or selected item or call reset item or select item. And with a dependency, so if your component has a dependency that is injected via the constructor