Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Build a Directive that Tracks User Events in a Service in Angular

    John LindquistJohn Lindquist

    A @Directive is used to add behavior to elements and components in your application. This makes @Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.

    angularAngular
    ^6.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 A common scenario is tracking things like button clicks, or other user events on the page so we can actually build a track directive to handle that for us. I'll make a directive with a selector of track. This will be an attribute. Make sure to import this, and export the class track directive. Then make sure to add that to our declarations.

    00:30 Once that's in there, we can come back to our buttons, and say track, and I'll just use a string of one button. Then this way, this track is an input on our track directive. I'll set that up. Import input. Just call it track, and then we want to track the clicks. Add the host listener for click, and say on click, console log this.track.

    00:59 Now when we click on button one, we should see the one button logged out. We can add this to all three of our buttons, copy paste. Paste two, three. Save that, and click, click, click. One, two, three.

    01:16 Now, the cool thing here is we didn't have to build a new component to handle this. We simply just added a directory which adds this tracking behavior to an already existing element. Now, to keep track and store these different tracking events, I'm going to create a service to handle that. I'll make an injectable, and say export class tracking service.

    01:37 Make sure to add this to our providers. Tracking service. Then we can actually inject the tracking service into our directive. Some constructor private tracking service, and now this tracking service is available inside of our listener.

    01:57 Instead of just logging this out, we can say this.tracking, and then we'll need a method on here to actually track. We'll just call this log. Then we want to keep track of these. I want to say log is an array, and these can be tracking events where we just say this.logs.pushtrackingevents. Then we'll just log this out to make it visual.

    02:19 Now, we can use this log method to say log. I'm just going to say the event was a click, and the message was this.track. Now, when I save, as I click this button, you'll see we have an array with an object in it with an event of click, and a message of one button. A click again.

    02:38 Now, we have another array with two tracking events in it. Click in two button, and we can keep on clicking, and adding those tracking events. It would be fairly trivial to even hook this up to a backend of some sort.

    02:49 With this track directive, you could continue to track whatever event you wanted. If I wanted to track mouse overs to say on mouse ever, call this mouse over. Now, let's save here, and now we're even tracking all these mouse overs, and clicks.

    03:05 We're adding more, and more behaviors to our track directive without even having to touch the buttons or components that we'd create.

    Discuss

    Discuss