Angular 9 Fundamentals Selecting an Item & ngIf
This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Selecting an Item & ngIf" Lesson
>> Now what we can do is go and set in our template. I'll put this, I'm going to create just another card. Let me see if I do. I was hoping I could get this to auto sense for me. Maybe not, well. Or maybe it's this one. Yeah, man, I love it.
[00:00:34] All right, so this is, I'm just gonna do debug and. I'm gonna delete some of this. Really, all I care about is the card content. And does everybody remember how we test, or how we kind of trace out something in the DOM? Well, we'll use string interpolation. We'll go current lesson.
[00:01:09] And we'll just go pipe json. I'm going to save this. I'm going to go back. And we'll go here. And hold on real quick. I feel like I did something wrong. Let me check my output, compiled successfully, let me go back into my template. I'm going to put this terminal in this window.
[00:01:45] Home component. There we go. I just needed to refresh. So, it's null. But then when I select this, you can see down here, I can bump this up. That as I select this, it's capturing that event, from the click event, and it's saving it back into your, it's passing it into your component class and we're saving it here current lesson.
[00:02:19] Which then we're using to just dump here and to debug. And so you start to do a lot of different things with that. But what I wanted to illustrate is we're looping over and we're setting our list. And then we're allowed. We're attaching this event handler to select the list item.
[00:02:43] And then we're just servicing what we've done over here in, we're just dumping current lesson into the state. So, we'll go here. You can see, we're just dumping this back out. So now, what I want to do is I want to talk about just a couple more pieces real quick.
[00:03:09] So the one thing that we have here, let me just refresh this page. And you'll notice it says null, because we haven't selected anything yet. And so what we can do is we can actually say I would prefer to actually not show null, if something does not exist.
[00:03:34] And in the DOM, like, let's actually just not show anything. And so what we can do here is if we go back into our code. And I'm going to go, let's do this. I'm gonna put this in a span tag. And this is just only, so I have something to pin it to.
[00:04:02] And I'm going to go ngif. And I'm gonna essentially say. If current lesson. Show this, if not, do not show it. So it's not going to add it to the DOM. And so now you'll see, it's not here. It's gone. And so now that I select it, then it shows how this works.
[00:04:36] And what you can also do, and I'll show you one other piece real quick. And I have this kind of on speed dial is the API docs. And so if you go to angular.io4/api, this is kind of the equivalent of like dial a friend. And you can just go and like, how does this actually work?
[00:05:01] You can go ngif, for instance. And very quickly see like, well, what's going on here? Like great. Now what's interesting is they also have not only ngif, but they also have else. And so this is kind of what I wanted to pull out. So you have then, you have else, but else is really what we care about.
[00:05:31] So kind of what I just wanted to pull out here is that angular.io/API. And I keep this on speed dial, because it's like, I don't remember how this one piece went. And so it's really easy to just jump in and very quickly, like, how does ngfor, what does ngswitch do?
[00:05:54] And so as well, somebody will use something maybe you just don't know what that is. And so this is a really good place. If you're trying to figure out what a piece of angular does, and you're not clear, angular.io/API. And that's, I think, a really good place to go and jump.
[00:06:12] So it's pretty helpful.