This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 7 Solution Part 2" Lesson
[00:00:00]
>> Lukas Ruebbelke: Now what we need to do is create a widget details component.
>> Lukas Ruebbelke: Maybe I'll parse this out, then.
>> Lukas Ruebbelke: Go 'widget-details'
>> Lukas Ruebbelke: But from here, we're just going to dump the widget.
>> Lukas Ruebbelke: To the page.
>> Lukas Ruebbelke: Whatever this is. So WidgetDetails input selectWidget.
>> Lukas Ruebbelke: Red means stop so gonna be a nice queue.
[00:01:39] So now this should in theory display some widget. Now what we need to do, the trick is,
>> Lukas Ruebbelke: We need to get this into a selectable state and broadcast it so we can show it in the item details. So what I'm going to do here is, for the sake of time, I'm just going to hop over here.
[00:02:06] And let's copy some stuff real quick.
>> Lukas Ruebbelke: I'm going to go here.
>> Lukas Ruebbelke: And we'll fill this in in just a moment. I shall go ahead and.
>> Lukas Ruebbelke: Pre-select this so just, cuz we know we're gonna use it. So we go widget-details.component.
>> Lukas Ruebbelke: Details. Put this in the directives.
[00:03:08] Won't make that mistake again.
>> Lukas Ruebbelke: And from here, widget details.
>> Lukas Ruebbelke: Selected widget
>> Lukas Ruebbelke: Scott used active. I'm gonna just this to selective because I can.
>> Lukas Ruebbelke: Okay.
>> Lukas Ruebbelke: And then in our widgets list, let's go to our items list component. We're just going to copy this.
>> Lukas Ruebbelke: Paste this in.
[00:04:11]
>> Lukas Ruebbelke: And we'll go Widget.
>> Lukas Ruebbelke: Of widgets.
>> Lukas Ruebbelke: Put that back in just a moment.
>> Lukas Ruebbelke: Aw yeah. So now we've got this list of widgets.
>> Lukas Ruebbelke: I'm not for sure why my price is not showing up, but that's done. It's irrelevant, and so now let's create the ability to select this and broadcast it.
[00:05:22] So we're gonna go here, output.
>> Lukas Ruebbelke: Output selected.
>> Speaker 2: It's equals new event?
>> Lukas Ruebbelke: Yeah I was going to type it but whatever.
>> Lukas Ruebbelke: I probably should just import this.
>> Lukas Ruebbelke: Okay, then from here, click.
>> Lukas Ruebbelke: = Selected.emit widget. Does this look right? Good? Yes? I believe so.
[00:06:32] Then we'll go into the parent component here and or the sum.
>> Lukas Ruebbelke: So when this fires, we're going to call this selectwidget. Take a widget parameter and we are going to go this.selectedwidget equals widget.
>> Lukas Ruebbelke: Snap. So you can see here, not super pretty. We could actually just clean this up for the sake of our UI department.
[00:07:39] Selected widget.name
>> Lukas Ruebbelke: Selected widget. It's not price, silly.
>> Lukas Ruebbelke: I'll show you, column select. No, what just happened. Okay.
>> Lukas Ruebbelke: And there we go. So just to review real quick. We created a widgets collection on our widgets service. Not interesting but more so what I wanna call out is that in our widget component here.
[00:08:56] You pulled in the widget service, we pulled widgets directly from it and then we passed it into our widgets list via an input. We did the same thing with selected widget. Whatever selected widget is on the parent component, that's what's being rendered in the widget details component. Then when we select a widget in the list, we are emitting that, and then sending it to here.
[00:09:23] Which is then being picked up by change detection, and then rendering here. And so these components know nothing of each other, in fact they're not even really doing anything other than when I select this, just admit who I am. And then the parent component is taking that, and immediately binding it to the widget details component.
[00:09:47] Yes, question in the back.
>> Speaker 3: Back there when you were on the selected widget and you're passing an event.
>> Lukas Ruebbelke: Mm-hm.
>> Speaker 3: They're wondering what is happening when you're passing an event, but the function type is a widget. How does that happen? So yeah, it's expecting widget, but you're passing event.
[00:10:08]
>> Lukas Ruebbelke: So if I were to wager, I believe event type is of any. So it's whatever I admit, then I just presume that's what's going to be coming down the pipeline. And so I don't think that event is typed to anything specific. So for instance, in this case because I'm manually triggering the event here, and I'm sending out the widget.
[00:10:35] That's what's coming up. But, for instance, if I wanted to actually, let's say I was doing like a drag, or, especially a drag, let's say something with a mouse, then I could do mouse-enter, or mouse-over, or something like that. I can just pass the native dom event and I would actually get event information on that link.
[00:10:56] Where was the mouse, where is the mouse, page dimensions and stuff like that. So this dollar event can really be anything. It can be a native dom event with information or it can be something you are specifically passing to it. In this case, we're passing a selected item up.
[00:11:16] Any questions? Pew, pew, pew!
>> Lukas Ruebbelke: So, before I go any further input, output. Does this make sense? The idea of how this just wires up. Good? Yes? I think that if you've ever tried to do an Angular One directive, this is far superior to that. Like isolated scope written Angular for over three years now.
[00:11:53] And there are times when I'm like what is going on here? And with the various forms of isolated scope, and trying to encapsulate that with now it's simply inputs, outputs, it works very well. And this sets the stage for building large compostable applications.