This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Directive Host Property" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott Moss: All right let's make it a little more interesting, let's make it a little more dynamic. Let's have it only change color on hover. Yes, we could do this in pure CSS, don't be a smarty pants, [LAUGH] we're going to do it with the directive. So what we can do is we can use this host property on the directive.
[00:00:22] So the way host works, the reason it's called host is because it's referring to the host element that this attribute is on, that's why it's called host. So it has nothing to do with like shadow dom or anything like that, it's the element that this attribute is hosted on.
[00:00:36] So what we can do is we can set up events. And host is an object that takes the syntax like this. So the key is the event on the host element that we want to bind to. So we want to bind to the mouse enter event. Just like you would write it in a template surrounded by parentheses.
[00:00:58] So that's the key. And then the value is the function of the method that we want to call. In this case we'll just say color. So when the mouse insert event is triggered on the host of this attribute, we want to execute the color method. Everybody see that?
[00:01:20] When this event is triggered on the host of this attribute we want to execute this method, all right? So now we need to make that method, so we'll just take that out. We still need to keep this ElementRef here, although we're not gonna use the constructor anymore. If we got rid of this we won't have access to ElementRef.
[00:01:38] So we still need to keep that constructor there, and initialize that metadata. So now we can say color and it's just gonna do that.
>> Scott Moss: So let's check that out, let's see what happens.
>> Scott Moss: So it's white, that's perfect, we hover over it, it goes red.
>> Speaker 2: Ship it.
[00:02:03] Ship it's done.
>> Scott Moss: [LAUGH] So let's make it go back to what it was. So now we'll just say Mouseleave, go back. Default or color [LAUGH] color false or something, I don't know, color two. [LAUGH] Color2. That'll work. Why not?
>> Scott Moss: And we'll just toggle back white there.
[00:02:54]
>> Scott Moss: There we go. So, any questions so far about this? Well, now let's set up like a default color, that we can put, that's optional, that the template author can pass in. So, as you've learned, we can use input for this. And just like on a component there's two ways you can use the inputs.
[00:03:17] We can use the inputs here.
>> Scott Moss: Or we can use inputs the way that Lukas showed you guys, which was-
>> Speaker 2: Is there a preferred way?
>> Scott Moss: So from my experience, if you read the source code, most of the code is written, most of the directives that they've built are written like this.
[00:03:38] But, most of the documentation wants you to use it the other way.
>> Speaker 2: That's why I was wondering if there's a, kind of a rule that defines why you would use one versus the other.
>> Scott Moss: I think it's more explicit if you use the decorators. I think it's just more explicit, because even though you define the inputs and outputs here, you still have to do the setters, getters, and initializers down here anyway, so you might as well just put them all in one place.
[00:04:09] That's the way I think about it.
>> Speaker 3: Is there any difference otherwise?
>> Scott Moss: No, there's no difference.
>> Scott Moss: So, we're just gonna use the decorators. So now, we'll just do it inputs. Oops, input on default, or, that's just so long, I want to put default color. I guess I will, default color and it'll be a string.
[00:04:55]
>> Scott Moss: And its default color will be,
>> Scott Moss: Red.
>> Scott Moss: All right, so now that we have that, we can actually use this input on the same host element that this directive is hosted onto. So because we made it input we can grab this name here. Actually, you know what, I don't really like this name, so I'm gonna use an alias.
[00:05:21] So this is a good opportunity to just grab an alias. So we can type in a different name here as an alias for the input, that's gonna be different than how we reference it here in the constructor. So this alias is how we will reference it in the template, and then this name is how we would reference it here.
[00:05:37] So I don't want to type this in on my template because I think it's too long, but it's fine here, so I'm gonna call it something else in the template like.
>> Speaker 4: [CROSSTALK]
>> Scott Moss: [LAUGH] [CROSSTALK] I know. We'll call it start. Yeah, dc, dc, dc, I like that, we'll do that.
[00:06:03] Good catch. [LAUGH] A little dc, okay, cool, so we'll do that. And then now, if we add an HTML, where is it at? Where did I put it?
>> Speaker 4: Better. What I'm saying. [INAUDIBLE]
>> Scott Moss: Wait, where's it at?
>> Speaker 4: Angular 2.
>> Scott Moss: There it is, okay, sorry. Too many yellows.
[00:06:24] Okay, so there we have that, and then now I can say, dc. And then I can pass in a default color which would be orange.
>> Speaker 5: So could you have a color as the color [INAUDIBLE] orange?
>> Scott Moss: Yeah, we can do that too. So if we don't wanna set up a new attribute and we just want color to be an attribute, let's do that.
[00:06:53] We'll do that and then we'll say orange. And then what we'll do is we'll come back to our directive and then now what we'll do is we'll say, we'll just change the reference or the alias to be colorer. But we'll still reference this default color in here.
>> Scott Moss: So now, what we do is when we go back we'll save this dot default color.
[00:07:30]
>> Scott Moss: Oops, wrong one.
>> Scott Moss: [COUGH] So let's go check that out, see how that works.
>> Scott Moss: Blue looks like something didn't go back.
>> Scott Moss: Colorer, default color. Let's see what that is. Go to a console.LR.
>> Scott Moss: Undefined.
>> Speaker 6: Log in
>> Scott Moss: Yeah, [CROSSTALK] wrong thing, thank you.
>> Scott Moss: That's undefined too, interesting.
[00:08:39] Let's just.
>> Scott Moss: Not do the alias, and say,
>> Scott Moss: colorer.
>> Speaker 6: [INAUDIBLE] [LAUGH]
>> Speaker 5: [LAUGH]
>> Speaker 6: Make the component [INAUDIBLE]
>> Scott Moss: With it with the raw stream in there, I wonder if it's expecting a model, like that.
>> Speaker 7: Yeah I think you do.
>> Scott Moss: Yeah that was it.
[00:09:26] There we go. All right so we got that, inputs so and then you can imagine it pretty much goes on and on and on from there as far as with active directors. There are other things in here like properties where you can set up bindings from different inputs directly to properties on the host element, like one for one.
[00:09:49] I wanna set an attribute called tooltip that binds to the text property. Yeah, you can do it yourself inside of here, but the properties will do it for you. Documentation there is kinda lacking though, so.