This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 4: Templates" Lesson
[00:00:00]
>> Lucas Ruebbelke: Let's look at the challenge first and then, I will fill in the blanks of anything that I need to do. So one thing we are going to do, because I do not want anybody into the wids and having to build up a bunch of layout in HTML.
[00:00:18] So I created this bitly link here.
>> Lucas Ruebbelke: And if you go into the browser, paste that in.
>> Lucas Ruebbelke: I kind of pre-populated the layout for you. And so you can just copy this, pasted into your widgets component. I am just going to go ahead and do that. Sorry folks, but that beautiful demo is no more.
[00:00:56] And so let's go over here. Let's just refresh and see if this even rendered.
>> Lucas Ruebbelke: Right, so this is just kind of a boiler play. I just didn't want anybody having to go figure out how to type a cell. The next thing that I would do is in the same thing.
[00:01:13] If you go down here, there's an array of widgets. Just copy this into your WidgetsComponent class, and you can just paste this in.
>> Lucas Ruebbelke: And what this will allow you to do, I'll just delete this as well, just clean it up, is now we have a collection that we can bind to.
[00:01:41] So let me show you one more trick, and this is quite possibly one of my favorite tricks. Is that if I go over here, we had a question about actually debugging and generally where I start when I debug is in the developer console. But occasionally, you are making assumptions about your data structure that is not true, or simply in your mind, you think something is one thing and it is not.
[00:02:11] So what you can do is using the pre-tag, you can bind to this. And this is just going to probably be, I haven't done this in a while, not super helpful. It's like, it's an array of objects. Not doing a lot for me, but if you use the JSON pipe, and you go here,
[00:02:42]
>> Lucas Ruebbelke: Now, low and behold, you actually have this nice serialized JSON structure for you to look at and see like, this is what I'm working with. And from there, it's a little easier to build your templates out and go from there. So, this is what I would use.
[00:03:00] For this, you'll use this in the challenge in the sense of, one pull the stipend in, but where do I do this?
>> Lucas Ruebbelke: When you have the selectedWidget, how do you know what is the selectedWidget? What I would do is just bind to the selectedWidget property and do a /JSON.
[00:03:33] And so just kind of a hint, I feel like I'm making this too easy.
>> Lucas Ruebbelke: Is probably something like I don't know.
>> Lucas Ruebbelke: And this way when you select it, you know what's happening.
>> Lucas Ruebbelke: This probably is going to break, or not. Did it break? It did not.
[00:04:02] All right, so let's talk about this real quick and then I can answer any questions that we may have. So create a widgets collection in the widgetComponent with mock objects. That is in the gist that is in the bottom here. Create a selectedWidget property in the widgetComponent. Then using ngFor, display the widget's collection in the template.
[00:04:32] Then using event binding, set the selectedWidget. And then display widget properties using property binding and interpolation binding. And then at the bottom, use ngIf to show an alternate message, if no widget is selected. Now two things, one, everything you need to complete this, feel free to check out the dear cousin to this feature, the items.
[00:05:05] Feature here, in the list, in the detail, quite a bit of good stuff there, but i will show you real quick because i feel like I glossed over ngFor kind of slightly. If we go to widgets component, let's do list, and I'm gonna just go. So I'm just creating just a simple array.
[00:05:37] And then from here, let's just loop over this. So, I'm going to put them in a p tag. We'll go ngFor, let L of list,
>> Lucas Ruebbelke: So I think again, this comes a little bit down to kinda the secret handshake. But remember the asterisks ngFor let. So we're basic creating this local variable via JavaScript.
[00:06:19] That is now available here for binding, so we can call this anything.
>> Lucas Ruebbelke: I don't know something that's soda, totally arbitrary, we just happen to look and see a soda can.
>> Lucas Ruebbelke: It's just essentially inside of the loop creating a local variable, the JavaScript that you can then line to.
[00:06:46]
>> Lucas Ruebbelke: So you can see here, it is just looping over and doing that. So that is if you have any questions about how ngFor works is ngFor, you choose your collection and say let some local variable of this list, or this collection, be available for binding inside the template.