Host Directives

[00:00:00]
>> Alex Okrushko: So the last part of the more advanced. This is the as advanced probably as it gets in terms of component composability interactions, behaviors and things like that, anything past that is probably would be quite hard to read by others. But I want to show you one more thing that is very useful, especially if you are extending other components, especially if you're extending other directives, and you want to bring the behavior of that specific directive straight into your component or your own directive.

[00:00:38]
Having this was really crucial for, especially for library component library authors. I was talking to Alex from Taiga UI, and this is like one of the best things that happened for him to enable, create custom components for him. So what do we do, we're going to do a thing, we're going to add, and this is, again, a little bit contrived example, but say whenever we click on specific things, we want it to do what it's supposed to do, but also at the same time track for some analytics, for example.

[00:01:21]
And yes, I know almost most modern analytics today, they'll basically go over your DOM and instrument all the clicks already so they'll hook in them and track them, but say we have a more naive one and we just want to send and say hey, when something was clicked, we can log, for example, so let's create this directive.

[00:01:48]
We'll call this directive a click logger. I will put it into shared because it's shared through entire application. We'll do the new folder, we'll fold this directive. And generally, like I won't probably won't even recommend to put directive services its own folders, this is just a shared directive to distinguish between shared common UI elements.

[00:02:26]
So let's have this directive, let's have this directive call it click logger. So this is a directive, unlike component, it adds behavior to whatever we apply this directive at. So we'll have the selector here and this, see, this is the beauty of Angular. Using its own templating LA plus compiler. You can select things by attributes and we've seen examples and you optimized image uses attribute to select, so we'll use the selector, the attribute selector, and we'll have like the app click logger right in square brackets means it's an attribute, it's not the tag name.

[00:03:25]
So what we're going to do here is, export this class, it's called click logger. So we're going to do this. I'm going to read the input from the host I'm going to call it like event name, for example, and this will be our input that is a string. We can have by default, give it some kind of default value like an unknown event.

[00:04:12]
Unknown event. So let's import the input. Let's also read only. We're doing the best practices here, so when we register that click, we'll just console log this for now, console log, ideally, this is what you'll connect and send the API request somewhere. Call some service to track certain things. Again, even just getting back to Firebase, Firebase has a performance monitoring quote web, where you can also log certain events and then see the stats for them and stuff like that.

[00:05:02]
Using that before, so let's say, hey, this is the analytics card clicked. And then we'll add the event name here as well. I need to do it here, we can do just comma. This event name. To do the space, all right, so we have this click, but this click does not do anything yet because we need to explicitly invoke it, but what we're going to do is, what we're going to do here is host.

[00:05:36]
So we're going to put it on the host element. And whenever that host receives the click event, we want to also invoke this on click. Right? So this is now whenever we put on the host this directive enhances it, does whatever that click does, but also adds extra behavior. Directives are for adding extra behavior to existing components, similar how we've seen in the ng-optimized image transforms things at attributes and even loads certain things, right?

[00:06:25]
All right, now we have this click logger. Let's go into our event card, event card and let's edit there. So right now, just to show certain things we can just try to add this here, for example. You can say this is a remove button, don't want to do the remove button, do the like button. So this is for demo purposes right now.

[00:07:01]
Let me get this click logger here. Right, the click logger and now within this button, let's say I want to track this like, for example. I can add this, what was the name for our click logger? App click logger. So we have this app click logger, this is a directive now, we're going to pass the input for this, you can say liked event, something like that.

[00:07:41]
We run it, it should compile just fine. This is the typical way we use directives. So whenever we click this button like the van, let's see if it outputs anything clear. What do you like? Right, we can see that this like was clicked. Right, so we have, we have the output here, it's providing a little bit more than we need.

[00:08:16]
Let's just make sure that we, Nili Kloggerlogy name, yes, OK, so this is input, we need to read the value from the input. All right, let's try again. And I attach it here. Let's touch it here. So we have it in the and that again we like, we see the like is there. Unknown event, are we not passing the event name?

[00:09:12]
Yes, the name, OK. We didn't tie this to event name. I see. Event name. All right, let's see that work, work, perfect. Clear this. Like, like, like, so it says like event, right? So now we have an input for that directive, and we have a directive that adds extra behavior, so the default behavior also works, right?

[00:09:39]
So we just have extra behavior here, OK, but that's not the cool part. This been there forever, you know what their directives are doing. What we can do is, what if somebody clicks on my this component, the event card. I want to track that. And yes, I can go into a parent and just add it the same directive that we just did, but I don't want to do that.

[00:10:06]
I wanted to control it from the component itself. I don't want to go to the parent and tell it, hey, attach all of these things. I wanted to self attach this behavior. So the way I'm going to do this is after the imports, I would say host directives. And I'm going to say, hey, there will be a few host directors one, actually.

[00:10:37]
And they're going to add the directive click logger directive. Click logger directive now it would add this now by default, but we also want to forward this input right? The one I was just explicitly we're telling what it is we want to forward that input and how can we do this. We say, hey, these are the inputs and the input of event name is this tracking ID.

[00:11:20]
Tracking ID where this tracking ID is going to come from that we can pass from the parent, or we can even from internally pass something, but we can right now that we can pass it as from the parent as well, so tracking ID. It says that we don't use the click logger in the imports anymore, that's true, because we use it directly as a host directive.

[00:12:06]
That works. Input event tracking ID. So let's add in our event list tracking ID. And we will say, this will be like the event card plus the event ID. Right, so that would be. Oh tracking ID. OK, so the, for the host directives here, right, so we edit a directive for the click logger and input this event name has to match the input that we have on the click logger, which is event name here.

[00:12:46]
And in the end, in the event card, the tracking ID is something that we would provide for external, here it is. So once we save it and we rebuild this thing. It starts working. So again, let's reopen the page. Clear current things, and once we see when we click click, we can see analytics here and even if we click the view details, right, it still tracks that.

[00:13:14]
Right, so anywhere in the car we click or the or the change pages, it would still track. Which is cool. OK, so that was module 2, let's switch to module 3, which will be, it's a special module, it's a little bit of a playground module.