This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 8" 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 use ngIf to give feedback to the user whether or not a widget is selected. You will also create a custom directive to modify the style of a widgets component when a user interacts with it.

Get Unlimited Access Now

Transcript from the "Challenge 8" Lesson

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

[00:00:03]
>> Scott: For the exercise, or the challenges, use nglf to give feedback to the user whether or not a widget is clicked. However that feedback you want it to be, it could be anything. It could be a style, it can be a message, an alert, whatever you want it to be.

[00:00:17] Some feedback that it was clicked. And then create a custom directive to modify the style of the widgets when a user interacts with it, like on mouseover. Yes, again, you can do this with CSS on hover, I get it. But just do something with a directive on some type of action with the widget.

[00:00:36] Maybe change the color, maybe animate a color and fade it. Something that'll be nice. And then, add inputs to the directive to allow it to receive the widgets' id. And that's it. We're not gonna do anything with the id.
>> Scott: All right, so, it is 1:53. We'll come back here at 2:10, and see where everybody's at.

[00:01:15]
>> Speaker 2: There's still a little confusion on that one. Would it be it makes sense you could just throw it in a plunker example form or something?
>> Scott: What's, the animation one that I did?
>> Speaker 2: Yeah I think he's getting confused about how it's happening in the four. Or in, yeah.

[00:01:30]
>> Scott: He's talking about this click right here. Okay, I took my microphone off.
>> Speaker 2: You can just hang it on the outside of your shirt if you want.
>> Scott: Okay, yeah, so let's walk through, see why that's happening. So the reason that's happening is because I'm inside of this for loop.

[00:01:58] Which is gonna have a new instance of item every single time, but each instance of item is sharing the same show model. So whenever show is true, all items will show hey. So to get around that, there's a couple ways. We can just not use one model here.

[00:02:17] For instance, we can say ngif, if active item triple equals the current item. We can do something like that, so then when you click, you can set active, and then you can pass in the item, and then down here, you can say activeItem=object. And then down here, this .activeitem equals the item that we're gonna pass in.

[00:03:11]
>> Scott: So now, only if the active item is equal to this item should this show. So let's check it out. I think it reloaded. Let me reload it just to make sure, okay.
>> Scott: And there we go.
>> Scott: Wait no, it's not doing it? I got some errors.

[00:03:40] Click, looks like I messed up. Toggle, setActiveItem. Let's just, we'll change it here. Let's try that again.
>> Scott: So there we are. So now it's only gonna do it if that's the active item.