Building Awesomer Apps with Angular Challenge 4: Solution

[00:00:00]
>> Lukas Ruebbelke: What I wanna do, just to make sure that I'm not leaving anybody behind, anybody is not overwhelmed. I'm going to go through this solution, and I'm really gonna take my time, and I'm going to talk through it. And if at any point I get to something that's sticky or that is confusing, just raise your hand, ask me to clarify and I will take as long as I need to get through this challenge.

[00:00:30] Cuz honestly, component classes and templates are just the foundation of everything that we're going to do. And so I definitely do not want to rush it, I would actually rather cover less material, and have everybody get it. And if I have to say something four or five times, totally more than happy to do that.

[00:00:54] So, let's go through and do this challenge.
>> Lukas Ruebbelke: And from here, I’m just going to cut this out. So this is just as if,
>> Lukas Ruebbelke: I pasted this in for the very first time.
>> Lukas Ruebbelke: I'll also get rid of this and so all we have now is a widgets array.

[00:01:28] So it is an array of widgets objects that we pasted in. And is well, just this template and so this is very, very basic HTML there's nothing special about. I just did not want everybody to spend in 20 minutes doing the layout and getting in the weeds. So now, if we look at the challenge, create a widgets collection in the widgets component.

[00:01:55] So we've done this, so now, the next thing that we need to do is we need to create a way to keep track of the current widget, so this is the nature of a master detail view. You have a master collection of something, you select one of the items in the collection that you can then act upon, and so we need to keep track of the selected widget.

[00:02:22] So the first thing I'm going to do is I'm going to create a property, and I'm going to define it. But I'm not going to put a value into it, I'm going to declare it, but it's not going to be undefined. But it is here, the next thing that I'm going to do, and this is slightly getting the cart before the horse, but I know that I need a way to set the selected widget.

[00:02:57]
>> Lukas Ruebbelke: And so, I'm just gonna create a selected method that takes a widget, and so this is kind of a basic center style function. That,
>> Lukas Ruebbelke: It sets this.selectedwidget to whatever widget we send in.
>> Lukas Ruebbelke: And,
>> Lukas Ruebbelke: So now I've created a property, selectedwidget, and I have a selected method that accepts a widget, and assigns that to selected widget.

[00:03:37] So far, so good, everybody understand what I've done? One property, or rather two properties, when you count the collection I pasted in, and one method, okay. So now that we have our component class with a property and a method, let's go to our template. So this is widgetscomponent.html, and we need to essentially create a list item for every widget in our array.

[00:04:12] So using ngFor we can say let widget of widgets,
>> Lukas Ruebbelke: And because we created widget, this local variable for this iteration, we'll go here and we'll bind to this. So widget.name, and let's go here.
>> Lukas Ruebbelke: We'll go widget, and you can see here that it knows kinda what we're dealing with, so widget.description, and let's see how this renders.

[00:04:52]
>> Lukas Ruebbelke: So you can see here,
>> Lukas Ruebbelke: We're just using NG4. We're looping over the widgets collection and for each item in the collection, or each widget, rather, in the collection, we're binding to a property on that object. Does that make sense?
>> Lukas Ruebbelke: Okay.
>> Lukas Ruebbelke: So now the question is, when I have this list of widgets, how do I select one?

[00:05:22] So obviously, kind of the basic event for that would be a click, so on the list item.
>> Lukas Ruebbelke: And I will break this down, so it's kind of on each individual,
>> Lukas Ruebbelke: Thing.
>> Lukas Ruebbelke: We'll go click,
>> Lukas Ruebbelke: And we'll go selected,
>> Lukas Ruebbelke: Then we'll go widget.
>> Lukas Ruebbelke: So now what is happening is when this list-item is clicked, it's calling selected and parsing in the widget that it scoped to that iteration.

[00:06:13] And so Angular is pretty good at keeping track of when I'm looping over this, that each item has a specific and unique variable or essentially, yeah, local variable that's assigned to that element. So it's not getting them mixed up.
>> Lukas Ruebbelke: And let's go down here. So under nbcard I'm just going to create a horizontal rule.

[00:06:38] And we'll go pre and we will go selected widget.
>> Lukas Ruebbelke: And we'll just go adjacent, so I want to dump this out.
>> Lukas Ruebbelke: In fact I don't know why I did this under the card. It seems like I left myself a little love note, they're like hey, here it is, okay.

[00:07:08] So now let's check this.
>> Lukas Ruebbelke: By the way, sure, I haven't done index key value pairs a ton but we'll certainly give that a shot. So after this is over let's see what happens. All right, so now, as I select this, you'll notice I select the green widget, it's now showing up.

[00:07:36] Let's do a couple things real quick.
>> Lukas Ruebbelke: If I go to,
>> Lukas Ruebbelke: itemscomponent.css, they have a bit of functionality that I quite like, and that is if I go to Items, you notice here when I do this mouse over, you get this kind of this cool, hey, this has focus.

[00:08:02] And so I'm going to borrow that from the itemscomponent.css. Hop back over to here, paste this in, let's see if we've made this any better. Yeah, I think so.
>> Lukas Ruebbelke: And now we can see as we select this that we're just rendering it out, which for now is completely fine.

[00:08:30] Because what we're going to do next is we are going to, or by the end of the day hopefully, we are going to actually push this into a form. But for now we just want to see that we are selecting, probably selecting a widget, and all this is doing is it's a click event, that's calling a method, select in this case, and passing in the widget that we have selected.

[00:08:58] Any questions about this so far?
>> Lukas Ruebbelke: How do you feel about this my friend?
>> Lukas Ruebbelke: Cheeky. It sounds so easy when I say it, but then, it's like, go forth and do it. So just to review, again.
>> Lukas Ruebbelke: Just simple method, click we're passing in the widget which is then setting the selected widget which we're then binding to.

[00:09:29]
>> Lukas Ruebbelke: Now, in the challenge we also had used ngf to show an alternate message, if no widget is selected.
>> Lukas Ruebbelke: And so here, or rather here, we're saying select a widget. Well, what I'd like to do is actually,
>> Lukas Ruebbelke: Show an alternate message. So we'll go selectedWidget.
>> Lukas Ruebbelke: And let's go selectedWidget.name.

[00:10:16]
>> Lukas Ruebbelke: And so now we're simply saying if there's a selected widget, then go ahead and show the name.
>> Lukas Ruebbelke: Eventually I'm going to land on the browser, so now you can see.
>> Lukas Ruebbelke: Well, this is fantastic, but currently we have no way other than to kind of I guess refreshing it to verify that this is working.

[00:10:42] What we can do is we can go down here and on the cancel, so what event should I use here?
>> Speaker 2: SelectedWidgit and pass nothing?
>> Lukas Ruebbelke: Yes.
>> Speaker 2: Click
>> Lukas Ruebbelke: Click, good, okay, perfect. So click we're also going to call select in. But in this case, we actually wanna send a null widget, so that is null.

[00:11:13] So now let's check this out.
>> Lukas Ruebbelke: Here, and so I click Cancel, should call selectedWidget, but it will set it to null, boom.
>> Lukas Ruebbelke: So still, I think on the JavaScript side in terms of complexity, we're still at about kind of a two or a three. We're just starting to put together these kinda really simple things together in a way that actually does some pretty interesting things.

[00:11:42] And, just kind of a side note here, it's really easy, it's kind of a new programmer, to really make things mystical. And we're doing these really hard things but I find that I do a lot of simple, fundamental, foundational things over and over. It's when you truly understand how to do these fundamental foundational things that you could start to compose them together to create things that does meaningful work for people.

[00:12:12] So non trigger applications, so it's really just a composition of a bunch of foundational techniques done very well.
>> Lukas Ruebbelke: And so let's go real quick, let's go in here. And just because I don't remember the syntax off the top of my head,
>> Lukas Ruebbelke: I'm just going to paste this in, and then we will explain kind of how this works.

[00:12:41]
>> Lukas Ruebbelke: So with Angular 4, they introduced this concept of ng if else. And so how this works is, if one condition is true they show one thing, if not then you show another thing. And so this also gives us the opportunity to see another local template variable and action.

[00:13:00] And so in this case, we're saying here's this template fragment and we're going to call it prompt. And so now, what we're saying is ngif so we'll dial this back in, selectedWidget. If it's true, show this, if not,
>> Lukas Ruebbelke: Then show this, so it's just ngif else, so it shows one thing or another.

[00:13:28]
>> Lukas Ruebbelke: And we'll actually do select.
>> Lukas Ruebbelke: So ngif else, show this template fragment.
>> Lukas Ruebbelke: So you can see, it's selected, cancel it and you're getting the alternate prompt.
>> Lukas Ruebbelke: Now let me try something off the top of my head.
>> Lukas Ruebbelke: And we'll just see what happens here.
>> Lukas Ruebbelke: So, somebody asked to see a key value pair.

[00:14:39] And so I am going to oblige and see what actually happens here. I know I haven't done this in a while but if all else fails,
>> Lukas Ruebbelke: Then we just pull it up in the docs and see what comes of this. So,
>> Lukas Ruebbelke: What I have here, basic key value pair.

[00:15:05] So if I wanted to get this object I just pass in the key, like for instance this goes back to property binding when I was talking about array notation. You can go first widget = thi.testWidgets, and pass this in. And this could actually be, generally it'll be actually a string if you're dealing with a JSON structure.

[00:15:35]
>> Lukas Ruebbelke: Like so.
>> Lukas Ruebbelke: And so this is also when I was talking about below notation.
>> Lukas Ruebbelke: It looks like this, or more so if we had it like a key.
>> Lukas Ruebbelke: Then key can change,
>> Lukas Ruebbelke: It's how it's going to return this. So this is where one array notation comes in, but a kind of key value pair of stuff.

[00:16:06] Is that you're able to look up an object on a collection immediately. All right, so with that said, let's see if I can iterate over this. Wish me luck, we'll see what happens. So let's go p,
>> Lukas Ruebbelke: And ngFor.
>> Lukas Ruebbelke: Hold on.
>> Lukas Ruebbelke: I have a feeling that this is not liking this.

[00:17:45]
>> Lukas Ruebbelke: This is not particularly helpful.
>> Lukas Ruebbelke: So I'm not going to let you get in the weeds too much on this. I may just have to come back tomorrow and show, I'll look into it. So let's just press pause on that, and I'll look into that. The next question is, does it have to be NG template if we're using else with ngif?

[00:18:25]
>> Lukas Ruebbelke: Yes, I’m pretty sure that is the case, yeah,