Transcript from the "Working with Components" Lesson
[00:00:00]
>> Let's get into some code and let's see this in action. So I'm going to hop into the Angular 13 fundamentals repository. And the one thing that I just, so you understand where I'm going with this, I'm going to jump to the 00 start branch. And this has some things that have been, I've just streamlined some stuff, so we're not starting from zero.
[00:00:29] So I'll go git checkout 00-start, and now I should be able to hop back into my code here. And let's just run this so everybody can see what we're dealing with, so npm start. And this should spin up here in a second, wait for it, there we go.
[00:01:02] All right, so now what we have is super basic, there's not a lot here. More importantly, is if I go to Courses, you'll see that I have an empty course list and an empty course detail. So if we go into the code and drill down to Src > App > Courses, we have our CoursesComponent, and we also have our CoursesComponent class.
[00:01:41] So, Let's start to build this out and make something functional. So the idea here is, I want to, first and foremost, I want to render a list of courses. And then I want the ability to select a course, and then based on the selected course, I want to be able to display that.
[00:02:14] So let me just write this down here. So step 1, we are going to render courses in a list. Step 2, we're going to be able to select a course. Step 3, we're going to be able to render selected course, right. So this is the goal that I am going to endeavor to complete.
[00:02:40] So what I'm going to do, because I think we need more than one course. I'm gonna go here. We'll go JavaScript The HARDEST PARTS EVER! Learn, Like a pro with will, all right. So we now have a property with two course objects in it, and we're going to render the courses in a list.
[00:03:27] So the first thing that I'm going to do, and this is a favorite technique of mine, is, using the pre tag, I can put a property and bind to it. And then using this JSON pipe here, that if I go back to my application, what this has done is it's taken the structure, and it's just essentially done JSON stringify and it's just kind of put it out there.
[00:04:05] So this is a really, really fast and easy way for when you're programming, and it's just like I just want to see where I'm at, how things are going. And so I will, especially on two monitors, I will use this just to kinda do spot checks and make sure that my assumptions are correct.
[00:04:28] So, interesting enough, we talked about the first set of bindings is string interpolation using the pre tag which preserves formatting, and then this JSON pipe here, that we're able to see the structure in fairly high fidelity right here. So that is just kind of a bit of a pro tip that I use frequently.
[00:04:55] Now what we can do is we can iterate over this courses collection and display it as individual item. So let's go with, we'll do an unordered list, and we want to create a list item for every single course that exist. So what I can do here is I can, using ngFor, I can say, let course of courses and then I can bind to this particular instance of whatever iteration is.
[00:05:53] Angular does a really good job of keeping track of what item in the collection am I binding to. So in this case, let me just pick this up. And let me just, I'll pick up the whole thing, and this is gonna be humorous, I think, we'll see what happens.
[00:06:15] Instead of courses, we're going to do course. Let's go back to our code, and so now all I've done is I've moved this into a list item. And so what we have here, just to summarize, is when you have a collection using ngFor, you can iterate over that.
[00:06:38] And you can, then for every iteration, it pulls an item out of that collection and then it allows you to display it. So what I can do now, is we do something like course title and we'll go here, so back into our code. And so now you can see it is in a list format.
[00:07:09] So what we're doing is we have the ability to then drill down and bind to a specific property on this item. Now, let's think about this, if we were going to click on this and we're going to capture this, what would that look like? Well, we would use event binding.
[00:07:38] So here, click and we're going to add a, or define a method here called SelectCourse. And we're going to pass in the course, and so Angular also is keeping track of when I select course, what course am I talking about. And so now I do not believe that I have a SelectCourse method in here, so we need to do a couple things.
[00:08:12] So the first thing is I'm going to go selectedCourse, and we'll just set this to null. And then what we can do, and this is actually course, singular. I'm going to create a selectCourse method that is going to take a course property and it's going to, Assign it to selectedCourse.
[00:08:57] Now we'll save this, and let's go back into our template, rather into our template here. And I'm going to take, I'm gonna do a pre tag and then let's go ahead and dump, The selectedCourse out, And we'll go using the JSON filter. Let's save this. And so now you can see that selectedCourse is null.
[00:09:41] But once I select this list item, you can see here that this becomes the selected course, and I'm able to go kind of back and forth across these. Now, what I will do, just to clean this up and because I don't remember what this looks like off the top of my head, let's go to, I'm just jumping into, The, Source code here and we are going to do a mat-list.
[00:10:25] So I'm just borrowing this from the master branch, then we'll go back here. And you'll notice here, I've already, for the most part, written this, and so we can get rid of this. And I'm gonna just comment this out real quick. All right, so just review what I've added, so I've just pulled this in off of the main branch.
[00:10:56] Is instead of using an unordered list, and actually, I need to put this up here, I put this in the wrong section. So, here we go. An unordered list here, let's go ahead and we're going to use a material list. So we have a mat-list, mat-list-item, and let course of courses, and selectCourse, of course, like a horse.
[00:11:23] And now what we're doing is displaying the title and the description. And remember when I used the JSON type here, well, we have one that's called title case, and what this will do is it'll turn it into a title case. So back to here, I'm gonna just put my pre tag back, selectedCourse, won't do JSON.
[00:12:03] We'll save this and let's see how this is looking. All right, so now what we have is two items, but it is in a material list. So just a quick small deviation off of this is, I don't make it a habit to memorize SDKs or even really large amounts of syntax.
[00:12:29] But if you go to material.angular.io, and you check on Components, they've done a really good job of laying out, these are the components that are available. And so for instance, you can see the list here, which I'm using. And right inside of the document here, you can see kind of the underpinnings of what I've done.
[00:12:56] So if somebody said, hey, I need you to write a list item, but you're not allowed to use any pre-existing code, this is what I would do. Is I would go to material.angular.io, and I would copy this. So this is what I call document driven development, DDD. And another pro tip, since I'm here, that if you click on this out arrow, that this will open up in StackBlitz.
[00:13:27] And you can see the code running here as well. So ironically, you'll see that they also have some squiggly line. So I think this might be just an Angular 13 thing that they're ironing out. But if you have a question about a particular component, how to implement it.
[00:13:50] If you're like me, you're not going to memorize an entire component development kit. But what you're going to do is, I think it's important at least understand where to find the answers. So if I wanna do a menu or a progress bar or whatever, they've done a really good job of surfacing working code examples that you can just copy right out of their documentation.
[00:14:16] So now, same exact thing, click, click, and we can see it. So we will extend this just a little bit further and, I'm going to add in this or uncomment out this delete button, and let's talk about this and what's happening. And we will, Kind of step through this, and there's just kinda one piece here that I want to call out is, so what we've added is a delete button in to the list item.
[00:15:06] And so if we look at this just the way that this is rendering, so let me add in this first. So it's looking for deleteCourse. And so I'm gonna go back here into my component class, And we're going to go deleteCourse. And we're going to take a course ID, and we're going to just log this out, DELETE COURSE.
[00:15:47] All right, the course, course ID, and so they should render. So that's one nice thing is that if it's looking for something in the template, it doesn't exist, it's going to call you out, because better now than in production. And so here, if I open up my console that, and this is probably small.
[00:16:09] Let me just make this big, bigger, you'll notice here that DELETE COURSE 1, DELETE COURSE 2. Whereas if I select this, then you're seeing the selected course over here. Now, I'm gonna save you a little bit of heartache and frustration. And you'll notice here that on this click event, I'm calling deleteCourse, but I also have this $event.stopImmediatePropagation.
[00:16:43] And what this does is that when I click on the button, it prevents that event from bubbling and also selecting the course that I want to delete. So if I take that off and I go back, you'll notice here that when I select this, I hit the Select or the Delete button, but it also selected the list item that was in.
[00:17:10] So essentially, because I clicked a child component, it bubbled up and it registered the click event on the list item as well. So this is undesirable behavior, this is obviously not what you want. And so how you solve that is to keep your events from bubbling in Angular.
[00:17:29] Is that within the click handler itself, so click, you're calling the method on the component, but then you're also doing $event. So it's capturing the event that was triggered, it was just saying, we're going to stop this immediately. So stop immediate propagation. And so we go here, now we can click this and it's going to obviously show in the console that we're doing this.
[00:18:02] But from here, we're still able to select the course.