This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Component Fundamentals Solution" Lesson
[00:00:00]
>> The first step, display courses using ng4. So we'll hop into the template and I'm gonna go to the course list container here at the div class. And then within this card, I'm going to do a mat-list. So let's see if I can get this to generate since I was a little bit hit or miss, but I at least want to try.
[00:00:31] No, no luck. So with that said, I will just do this by hand mat-list. And then within here, we're gonna do a mat-list-item. Let me try this again. Well, so mat-list-item. And within the mat-list-item, we're going to loop over the courses. So we'll go ng4. And from here it's let course of courses.
[00:01:14] And this is just going to iterate. So this is in its simplest form, a functional for loop. And then within this let's just go course Title, there we go. All right, let's hop into our browser. And let me just change the route here, so we replace home with components or courses, rather, sorry.
[00:01:52] There we go, and you can see that it is rendering. Now, I saw somebody in chat say, let me try this one more time. That they tried. All I was looking for. All right, no worries. Okay, so this is okay, but I feel like it could be a little better.
[00:02:18] So I'm going to just extend a little bit on this. And this is just merely from perusing through the documentation. But let's go h3 and I'm going to attach matline. And so what this does is it just forces it into a line. So again, this is just from reading the documentation, and just kind of understanding what options are available.
[00:02:42] But then underneath of that, let's do a p tag. I'm also gonna make this matline and we'll do course.description. And I just caught a typo, all right? There we go. And let's save this and see if this renders properly. I forgot something. In my haste, I forgot to close that.
[00:03:14] Let's go back here. There we go, perfect. All right, so now what we need to do is we need the ability to select a course. So I believe this is the second piece. So the first thing I'm gonna do here is I'm going to create a selectedCourse property, and I'm going to set it to null.
[00:03:42] Then from there just underneath to this, so properties go on top methods go on the bottom. I'm gonna go selectCourse. We'll pass in a course parameter and then we'll go this selectedCourse = course. Okay? Then from here, let's hop back into our template. And we will bind to the click event.
[00:04:12] So put that in parentheses, selectCourse and we'll pass in course. And I believe this is working. This is kind of, I have high confidence but I'll just go ahead and we'll just log this out incrementally, courseSelected, course, there we go. Let's hop into here. I'm gonna open up the console, there we go.
[00:04:45] So you can see course selected, very good, okay? So the next step to complete our challenge is we need to render the selected course inside of the second column. So pretty straightforward. We're just going to do our pre tag selectedCourse. We'll bind this here and let's just see real quick, cuz we haven't really talked about this is if you don't do JSON, what happens?
[00:05:26] So we'll go back here. And notice it's just saying it's an object. And so it's just kind of like a console log without actually doing anything with it. But when you add in the JSON pipe under the hood, what it does is it pipes that output into this pipe and it converts it into JSON.
[00:05:45] So back into the code or back into the app. We click on this and you can now see that we have the ability to select a course. Now, just for the sake of continuity, I'm going to add in just a few more pieces to keep this application in kind of a coherent narrative arc as I would develop it.
[00:06:14] So this is what we're trying to balance here is kind of these concepts in a sequential order, as well as trying to capture kind of some organic developments like this is how I would code. So within our matlist item, I want to give the ability to not only select a course, but also to delete it.
[00:06:36] So I'm going to create a button and I'm going to add mat-icon-button. And so this is another angular material component or directive that we put on and so I'm gonna give this a color of orne. At first I thought that was warm. I realized not so much, and then within the button, I'm going to put a map icon.
[00:07:07] And I'm just going to put delete. All right, let's just save this to make sure I haven't went off the rails. No, there we go. So you can click but notice when I click the button, that because we're dealing with native DOM events, it's actually bubbling up. And so we'll address that in just a moment, so back into the code.
[00:07:32] I'm going to add another click handler and I'm going to say deleteCourse. Now in this case, the only information I need to delete the course is the ID. And you notice because I have the angular language service running that it's not defined. So this is really handy. So I can hop back in here.
[00:07:57] And I can fill this out real quick courseId. And, courseDeleted, we'll just log this out as well. There we go. And back into our application, I'll pull up the console. And this is going to be somewhat interesting, is I clicked this. Notice a couple things happened. The first one being that I clicked the delete button which had fired the event handler, but that event bubbled up and inadvertently I selected a course.
[00:08:51] So, how do we handle this? So back into the code, we'll go here and what we need to do is essentially, just to stop the event propagation. So what we'll do here is and I'm gonna break this to a second line just so we can see this in its entirety.
[00:09:17] In a click handler or in an event handler, you can put in more than one function, which is what we're gonna do here. So, with every event handler, there is an event property a dollar event that we have access to. And so now I can go stopImmediatePropagation, and this should do the trick.
[00:09:45] So I'll save this, and let's go back into our application. Notice it fired down here, but I did not select the course. So let's just do one more thing real quick to just tie this up, make it nice and neat. And that is, Here, what we'll do, Is we'll do ngIf and we'll just do selectedCourse.
[00:10:30] So pretty simple, we're just gonna say if it's not null, then we'll show it, or if it's not null, we'll show it, if it is, don't show anything in this case. So we'll go back here into our app, nothing here, I select it. There we go.