Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 8 Solution Part 1" 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:

Scott begins walking through the solution to challenge 8.

Get Unlimited Access Now

Transcript from the "Challenge 8 Solution Part 1" Lesson

[00:00:04]
>> Lukas: Use NGF to get feedback on the user whether or not the widget is selected. So let's do that. Let's go back to those widgets and I believe it's going to be in the Widgets list, component. So we want to give some type of feedback when these things are selected.

[00:00:27] So what we can do is we'll just add an NGF here, we can say, let's just do something very trivial, let's just add, well I guess that's what the master detail does. We could say, what did everybody else do?
>> Speaker 2: Highlighted the background. Invoke center, highlight the background also.

[00:00:50] Highlight directive.
>> Lukas: Well, I'm saying for the NGF?
>> Speaker 2: So if you don't have anything selected, don't show the right side.
>> Lukas: Out of span.
>> Speaker 2: Okay, let's do that. That sound cool.
>> Lukas: So, if nothing's selected in the master detail view, then you didn't show anything. Like here, or, where is it at?

[00:01:07] Right here. There we go. So, if nothing's selected here, then you didn't show anything on the right.
>> Speaker 2: Yeah, cuz the background's grey and the card was.
>> Lukas: Let's state in a list. Let's do something in here. So what we can do is, when you select a wizard, we could, actually let's come back, I'm not drawing a blank.

[00:01:36] Let's do the other one first too trivial. Let's create a custom directive that modifies this style, this one's more fun. So let's make another directive that like, we can do here, have some fun with this. Let's just highlight the car a different color, change the text, different stuff like that when you click on the directive so we know it's actually active.

[00:02:04] Right now, it's kinda playing, we don't know which one is clicked. So let's do that. We'll do it on mouse over and also when it's active. So let's start with the mouse over one. Let's just add a new file here. And we'll call it On, I'm so bad with names, highlight it, Highlight.

[00:02:43] So we call it highlight and we'll do this thing again.
>> Lukas: There we go.
>> Lukas: Our selector will be highlight.
>> Lukas: And then what we'll do is we'll export the class.
>> Lukas: Highlight.
>> Lukas: There we go.
>> Lukas: And we also need Element Ref. And we'll inject that into our constructor.

[00:03:51] So we have that and then we only want this to happen on mouse enter so we have our host here [SOUND] and we'll just say,
>> Lukas: 'initHightlight()'. We're gonna make that method, cool. And all this is gonna do,
>> Lukas: Change the background color. Color to,
>> Lukas: Green. All right, seagreen.

[00:04:45] I didn't make that up, that's a CSS color. [LAUGH] Okay, now why is this freaking out? Native event, nativeElement.style. There we go. The text will probably look bad, so we'll change the text too.
>> Lukas: Let's just do this.
>> Lukas: There you go. So we go that now we need to wire it up to our components so we can use it.

[00:05:34] So what we have to do is go into the, what's happened to the- Wizards list? Yeah the wizard's list, that's what we were doing. So add to the widget list but we only want it on the individual widget so we place one here on the component, we will say directives and it is called highlighter or highlight,

[00:06:05]
>> Lukas: and imports
>> Lukas: Highlight from /highlight. And it's not liking me.
>> Speaker 2: Sometimes I've noticed with adding you have to save first.
>> Lukas: Yeah, you're right, cool. So we got that, and now we have the widget for the widgets, and what we'll do is just place that here, so now we can just say Highlight.

[00:06:48] Now let's see what happens. Cool, so a highlight kinda works, but still green, so we need to go back and fix that. So what we'll do is we'll come back and we'll just do the inverse.
>> Lukas: I'll call this something else now.
>> Lukas: There we go.
>> Lukas: If highlight then we'll do this.

[00:07:55]
>> Lukas: Else.
>> Lukas: So lash worker is not working here. Let's do that.
>> Lukas: Else we'll do this.
>> Lukas: Let's check it out. There we go, it's highlighting. Still that is not good enough. I would probably do something like this. Add some styles let it ease in a little bit.

[00:08:41] It's like it hurts my eyes when it's transitioning. What is this? This is a widget-card.
>> Lukas: A little transition never hurt anybody.
>> Lukas: There we go.
>> Lukas: Cool, much better. All right, so now we have a nice little highlight.
>> Lukas: Any questions on that?
>> Lukas: Actually I did just noticed one thing.

[00:09:29] It doesn't look like the text is changing, that's because it's not propagating down and that's fine. Let's change in the style, well the text isn't changing because of the hierarchy of the HTML where it's Texas here and there is this, the color is being set here so. But that's fine.

[00:09:50] Any questions on that?
>> Lukas: Why didn't that break?