Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 7" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, you will create “dumb” widgets-list and widget-details components using @Input and @Output.

Get Unlimited Access Now

Transcript from the "Challenge 7" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Lukas Ruebbelke: There was a question maybe before we get into that.
>> Audience: Yes, on handling really large apps, is there anything like OC Lazy Load that was in Angular One? Or anything like code splitting with webpack?
>> Lukas Ruebbelke: There is.
>> Lukas Ruebbelke: Scott, would you like to answer that?
>> Scott: What was the question?

[00:00:23] I didn't hear, I'm sorry.
>> Lukas Ruebbelke: He was thinking about lunch, we apologize.
>> Scott: Yeah.
>> Audience: Talking about really having really large apps and Angular One has OC Lazy Load. Is there anything like that in Angular Two? And then code splitting with webpack.
>> Scott: Yeah, I would recommend using the code splitting or the asynchronous module loading with Web Pack.

[00:00:41] Code splitting the webpack is pretty well documented and simple. And then you can use require inside of webpack to dynamically load components. So it makes sense the title's in the routing. So you can totally do that. But webpack, yeah, pretty much handles all of that stuff.
>> Lukas Ruebbelke: Thanks webpack.

[00:01:02] All right, time for the challenges.
>> Lukas Ruebbelke: So what I'd like you to do is using the items components as a reference, we're going to create a dumb widgets list component and a widgets detail component. Using Inputs and Outputs. From there, create a widget service and hard code a widgets collection.

[00:01:27] So this can just be an array of widget items, whatever you wanna do. Scott actually I think did a pretty good job of laying some of that out. So you're welcome to, did you check your branch in? So, his solution is up on GitHub if you'd like to pull that down.

[00:01:44] And then consume the widgets component or consume that collection of the widgets component and pass it into the widgets list component render that. From there, I'd like you to create and event that when you select the widget from the widgets list, that it communicates that to the widgets component.

[00:02:01] And displays it in the widget details. This is what happens when you do slides in Uber on the way to your workshop.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: Now everything that I am proposing here I would not ask you to do something that I have not done myself. And by that it's all been done in the items feature so please use that as a reference.

[00:02:36] And if you wanna be super rad, try not to mimic the items object verbatim. Play around with it. So, try some different properties and create an interesting object. Because we're going to be actually, for now you can just dump, or combine to the widgets object in the widgets detail.

[00:02:58] But then, this afternoon, we're going to be converting that into a form to actually edit it. So.