[Angular Directive] Build a Directive that Tracks User Events in a Service in Angular 2

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.

 

import {Directive, HostListener, Input} from '@angular/core';
import {TrackingService} from "../services/tracking.service";

@Directive({
  selector: '[track]'
})
export class TrackDirective {

  @Input() track;

  constructor(private trackingService: TrackingService) { }

  @HostListener('click', ['$event']) onClick(event) {
    this.trackingService.tracking(
      event,
      this.track
    )
  }
}

 

import { Injectable } from '@angular/core';

@Injectable()
export class TrackingService {

  logs = [];
  constructor() { }

  tracking(event, log) {
    this.logs.push({
      event,
      log
    });

    console.log(this.logs)
  }
}

 

<button [track]="'one is clicked'">One</button>
<button [track]="'two is clicked'">Two</button>
<button [track]="'three is clicked'">Three</button>