This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Component Architecture Solution" Lesson
[00:00:00]
>> So welcome back. And let's see the solution for our component driven architecture challenge. So let me hop into the command line and what I'm going to do is, ng g c and, And I'm gonna call this lessons-list. Let's do, I think it's module, I'm just trying to remember from memory .ts-d.
[00:00:40] There we go, so I'll just highlight this. So everybody can see this real quick, ng g c lessons/lessons-list. The module is =app.module.ts, and we did the dry flag,. I'm gonna push this up. Here we go. Boom, all right, so if we hop into our code, now what I should have is lessons/lessons-list.
[00:01:08] So I went ahead and did this as a subdirectory. I imagine at some point somebody would actually build out a lessons feature, all right? So from here, the first thing that I'm going to do is I'm going back into my home component, the template and I'm going to just chop this all out.
[00:01:31] And instead, I'm going to just go app-lessons-list, and I'm going to render this. Let me just save this real quick, and let's see what happens. All right, lessons-list works, ta-da. Back into our lessons-list component here, I'm just going to paste the first card, and I'm gonna delete the second one.
[00:02:01] And what do we have here? So we have title, obviously that has nothing to do with our selected lesson, but we do have courseLessons. So what I'm gonna do is I'm gonna change that to lessons, and now we have a couple things that we need to add to this.
[00:02:22] So again, if your brain is working ahead of me, I applaud you. We'll go here, we did an input. First and foremost, we need lessons. We also need an output. Which is selected = new Event There we go. EventEmitter and this is a very, very, very thin component.
[00:02:58] One thing I do as well, I feel like this might be a plugin, but a lot of times I'll just organize inputs, organize imports. And I'll think about it just kind of exist, but, The plugin for that, I believe is, real quick, Have a Ts import, the ability to do that.
[00:03:37] Maybe not, so just chop out everything I said in post, I take it back. That might be baked into VS code, but I like to organize my imports to make it nice and tight. So back into the template, we're gonna go selected.emit and there we go. So now what we need to do is in our lessons-list, We need to bind to this, so we'll put in courseLessons, and then from here we'll take (selected) = we break this up.
[00:04:26] SelectLesson, and we'll go ($event). And, Again, how do we know this is working? Well, let me just, I think it is selectedLesson, I'll pull this down in just a second out of the component. currentLesson, so there we go. Let me save this back into the template, all right?
[00:05:12] Now we can see that we have inputs, outputs, and it is rendering. There we go. So Ashwin had a really good question. Instead of using object.assign in the child component, can we use the spread operator in the parent component when setting data to the child? That's kind of two questions actually.
[00:05:46] So one, can you use the spread operator? Totally, so I've seen that, occasionally I will use it. What I do prefer, though, is to encapsulate that the copying or the cloning of that object to the child component. And so what you wanna do is you don't want to burden the parent component with having to know the internal implementation details of the child component.
[00:06:14] And so the answer is, could you do it? Yes, you could. But I would say using the spread operator, totally fine. More importantly, though, I think you should clone the object in the child component. Because if you don't, then any parent component that uses that is now responsible for knowing the internal implementation details of how that child component works.
[00:06:38] And so you want to really kind of create that nice encapsulation around that. And so that's why I would say, those are kind of two separate things. But remember, you wanna keep things in a place that it doesn't create more work or more questions down the road. So hopefully, that made sense.
[00:06:57] So this is the solution for this challenge. Let me make sure I did not miss anything, there we go, all right.