Angular 13 Fundamentals Angular 13 Fundamentals

Component Solution

Learning Paths:
Topics:
Check out a free preview of the full Angular 13 Fundamentals course:
The "Component Solution" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through the solution to the solution to the component exercise.

Get Unlimited Access Now

Transcript from the "Component Solution" Lesson

[00:00:00]
>> So we're going to walk through the solution and I'm going to do just a few extra things within this solution. Just so we can start to move towards a coherent application. So the first part of this was to, within the courses component, display the courses using ngFor.

[00:00:22] Add an event handler to select a course, and then display the raw JSON of a selected course, we are going to do a similar thing in the home component. So just to lock this down, if we go into our courses component HTML, you'll see here that I've added a mat list that has a mat list item, and so I can kind of shrink everything else that's in here.

[00:00:58] And we are using ngFor to iterate over the courses and essentially stamp out a templated item for every single course, so I'm going to just copy this. And let's go into our home component.html, and we're going to take these course lessons here that you can see in the component itself, and we're going to render these.

[00:01:26] So what I'm gonna do so that I'm not typing everything over and over, and I'm going to just delete this up here. So I just have a mat list, a mat list item. The first thing we're gonna do is use ngFor. And we're going to go let lesson of course lessons.

[00:01:52] And this is going to iterate over, so let's just go ahead and make sure that we are rendering this properly. I'm just going to go lesson, don't know what's actually in here. So we'll just do a pipe and we'll do JSON. We'll save this. Let's hop into our browser, and let's go to our home route here.

[00:02:27] And so you can see we're just iterating over, we're dumping this out. But we have a title property here that we actually want to bind to, so we'll go back into our code and we'll go. All will bind to this, oops, lesson.title. Let's check this out. Here we go.

[00:02:51] And what I want to do is create an event handler that when I select this, then I'm able to capture that and do something with it. So we're going to go click and we're going to go select lesson and we're going to pass this lesson in. And we'll hop into our all component and we'll add in our event handler here, select lesson, which is going to take a lesson.

[00:03:25] And I'm kind of doing this backwards, I realized selected lesson equals lesson, all right? So you can see here that this doesn't exist. And I wonder what happens if I click declare property selected lesson. Well, what do you know? It went ahead and just added this for me.

[00:03:50] So let's hop back into our browser. And you can see here that one it's rendering, but let me go back into my code real quick. And, or rather, let's go into our template. And let's do, want to just do a horizontal row, which I just use as a, just to kind of segment the layout.

[00:04:16] And we'll do our favorite pre tag here, and SelectedLesson, and we're just gonna dump this out back into the browser. And so you can see here that as we select this, this is now showing up underneath. And so I believe this satisfies the entirety of this particular challenge.

[00:04:48] Let me just double check, yep, raw JSON of selected lesson. But let's go ahead and I'm going to do a few other things, jjust as kind of an extension of our component challenge, so that we can see this working, so in our, app.component.html, we have a sidenav here.

[00:05:25] And If we look in the HTML itself, you'll notice that there's nothing actually here. So what I'm going to do is, because I have to find the path here, so I have a links collection with home courses, even some icons, a couple different thing. Let's go ahead and let's build this out.

[00:05:50] And so we're going to use a nav element here. And then within this, I'm going to go anchor tag that button. We're going to set this to class nav link. And we're going to, let me just close this off real quick, so I can do this in a way that makes a little bit more sense.

[00:06:18] So now, let's iterate over this. And so ndFor, and we're going to go, let link have links. And let's go ahead and add in a mat icon. And we're going to go link icon. And from here, We're going to do link.title. So let me just save this real quick and see where we ended up at.

[00:06:52] So here we go. So you'll notice here that it's not actually doing much. And so let's wire this up. And we're going to talk about this a little bit more when we get into routing. But at the same time, I think that having something functional, trumps narrative arc in this case.

[00:07:13] So we need to add the ability to link. So in this case, we're going to bind to router link and we're going to call link.path. And then, what we'll also do is, we'll go router link active and we're just going to attach an active class here. So let's save this, and hopefully, we can navigate.

[00:07:45] So we'll talk a little bit more about router link and how that works, but even if we go to, real quick, let me just inspect this. What you see here is that, if you look right here, because this is active courses that we have the active class on this.

[00:08:13] And so if I went in and defined inactive class that, I could say I want this to be read. We now have the ability to navigate from home to courses and back, because we built up the navigation using ngFor. And is well using property binding, we were able to essentially bind to this router link directive and send in the path.

[00:08:51] Now let me do one other thing real quick since we're here. If I go to, Coursescomponent.html, you'll see here that I have a Course that when we select it, we are displaying it. But then, if nothing is selected, then it's just kind of like no book. Super boring.

[00:09:24] So I want to update this slightly, within this mat card title. What I'm going to do is I'm going to introduce a span tag, and I am going to go ngIf, and we're going to go selectedcourse.id. So it's basically saying, is there a selectedcourse and does it have an ID?

[00:09:53] And if not else, we're going to give it just a, want to call it elseBlock. Really, really progressive there. So If it does exist, then we're going to go SelectedCourse.title, title case. So just what we did up here, and then if it doesn't, then we're going to do ng template and we're going to define our elseBlock, and We'll go select a course, all right?

[00:10:43] Let's save this, let's go back into our application. So what you're gonna see here, mat two, it's trying to read selectedCourse.id, but guess what, that doesn't exist. So this is where we use our safe navigation operator, to say, try to read it. And if it doesn't, then just give up.

[00:11:13] So now, here, Here, and so let's go. And let's add something else in, since we're here, and I'm going to jump back into the code. And in the actions, I'm going to add a button. And eventually we're going to use this to reset a form. But for now, what I'm going to do is select course, and I'm gonna pass in null, we'll see what happens.

[00:12:07] So back here, And so what I'm doing now is I'm essentially setting the selected course to null. All right, so we're kinda moving along, things are looking cool. So I'm going to cut this off, check it in, and then we're going to go to the next logical extension of this application.