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

In this challenge, students create widgets-list and widget-details components using @Input and @Output.

Get Unlimited Access Now

Transcript from the "Challenge 7: Input & Output" Lesson

>> Lukas: So what we wanna do is create a presentational widgets-list and widgets-detail component using inputs and outputs. So on our widgets-list, we wanna pass in, essentially, the widgets. And we also wanna capture a selected event. And then, in our widget-detail component, display the selected widget, and then we also want to fire up a delete, save, and cancel output.

[00:00:35] Now these don't actually have to do anything other than just log to the console in the browser. So we simply wanna capture the event and fire the output, and then our parent component, maybe just log it out, and then we'll wire it up from there. And feel free, in terms of template, if you need to borrow anything from the items component, go ahead.

[00:00:59] What I would do is when you display the selected widget, just do a JSON dump as we're doing, because in the next lesson we're gonna talk about forms. All right, for the challenge, the idea is to take our existing widgets work that we have done, in kind of an over-aching widgets component and start to break it out into sub components.

[00:01:22] So to create a widgets-list component and a widgets-detail component, or a widget, singular, component, and we want to wire these up using input and output. So for the list we wanna pass in the widgets. And then we wanna capture a selected event or, output, and then we wanna pass or handle that and then pass in the selected widget into the widget-details component.

[00:01:47] And then we're just going to stub out some additional outputs that we'll hook up in the next module.