Angular 9 Fundamentals ngFor

[00:00:01]
>> So let's take this whole component. And I'm just going to get rid of all of this here. And I think I will leave the title in. And now let's do something with these course lessons. Okay, so now, It's super okay, I guess, binding to a single property or calling a method.

[00:00:32] But what happens when you actually need to lay something out on the page? And Angular has a number of, Essentially directives or structural directives that will allow you to kind of manipulate the DOM based on the data structure that you bind it to. And so, I think, the most useful one, right out of the gates is ngFor.

[00:01:04] And so if we go back to our courseLessons here, we have all of these lessons. And I would like to lay them out, and lay these out on a page, and do something with it. So a question that just came in is what would be the use cases of two-way data binding?

[00:01:27] Typically, the only time you'll use two-way data binding is if you're using a template driven form. So forms, eventually at some point, you have to mutate data. If you're doing template driven forms, that's where that comes in, is I need to type in a text field, and I need it to update somewhere else.

[00:01:46] So that's where that comes in. And that's where I use it. More often than not, you kinda want your bindings to be really unidirectional and that data flows down and events flow up. This is a state management conversation, which I'm saving for later for my friend over here.

[00:02:05] And we'll talk about that a little bit more, but really, I only use two-way data binding if I'm doing a template driven form, and I need to mutate data. So all right, we have this course lessons here and I would like to lay this out, and I would like to not have to type all this code over and over and over.

[00:02:28] So I'm gonna hop into the template. And I'm going to just lay some boilerplate here. Let's see if we can get this to render. All right, and this plugin is super nice because it basically did all the heavy lifting. And so what I'm gonna do is I'm gonna create a mat list and I'm going to put list items in here.

[00:02:52] And you'll notice that it's ngFor let item of items, and so we're going to delete this because obviously I don't have items. But what I do have is I have courseLessons, and so if I go here, I can say, let lessons of courseLessons. And now what this is going to do is, think of this is just a classic for loop.

[00:03:23] It's just going to loop over courseLessons and it's going to essentially stamp out an instance of the template or the element that it's on for each of the instances in the collection. So we'll go, we'll create h3, and within here, let's go lessons.title. All right, and I'm going to save this.

[00:03:56] All right, so before we look at this, I have courseLessons and I'm just looping over this. And I'm saying stamp this out on to the page. And so if we hop over here, you'll notice that, It's now laying this out which is exactly what we would hope. The upside is, in our template, we only had to write this once.

[00:04:27] Now, let's do something. So we've looped over it. Let's take this a step further. So let's say I want to select a lesson. So I'm gonna go back to home component. And I'm going to create a method, and I'm going to selectLesson. And this is going to take a lesson.

[00:04:59] And I'm also going to create a property. And I'm gonna call this currentLesson, and I'm gonna set this to null for right now cuz it doesn't exist. And then from here, we're gonna go this, currentLesson = lesson. Okay, and so again properties, methods, this has very little to do with Angular until I come over here, and I want to be able to select lesson.

[00:05:36] So let me use click, this is typically, I think, the event handler you're gonna use the most, selectLesson. And the upside is, and I'm gonna try something here. So in the background, if I go back to my plugins here, this is gonna be just a slight side way, it's you'd notice that I have the Angular language services plugin and I'll actually post all these.

[00:06:06] And so what this does is just sit in the background and it gives you some hints as you're typing. And so it tries to just be helpful. So it's kind of like the Jarvis of Angular, but I think I crashed it earlier. So in VS Code, if you go Cmd + Shift + A, you can kind of essentially, it's like your master control panel, all your lessons.

[00:06:34] And so every once in a while if I'm not getting the kinda the IntelliSense that I want and there's no guarantee this is gonna work, but more often than not, I will just go and restart the language server. And so there we go. So now you'll see lesson and it's able to introspect into the component class and see that.

[00:07:02] And so here, let me just delete this back out, if you go selectLesson, there we go. So I kind of just slipped actually like kind of a nugget in there without intending to, is that if you have the Angular language service installed in VS Code and it's running, you can get some really helpful code sense.

[00:07:24] So it really streamlines the development workflow. In fact, I probably would have got dinged if I would have actually had this running. And so click selectLesson, and we're sending in lesson. Now one thing I wanna call out here is that as we're looping over this, it's creating using let a locally scoped variable called lesson that refers to whatever lesson you happen to be iterating over that time.

[00:07:55] And so Angular is smart enough to know that when I go selectLesson and I pass in lesson, it knows that whatever I click on, that's the lesson that I want to send in. And so I'm gonna save this. I'm gonna go back into here and let's go, and I'm just going to, Just console log this back out.

[00:08:23] So console.log('SELECT LESSON FIRED'), so we can just see it. And we'll go lesson, save this and we'll go back into our code. And if we look in the console, and I'll kind of zoom this up, as you can see, as I'm clicking here, There we go.