analytics.directive.ts

/**
 * Supported events for analytics.
 */
export type AnalyticsEvent = 'click' | 'focus' | 'blur';

/**
 * Directive that used to log client events to the analytics provider by using {@link AnalyticsService}.
 */
@Directive({ selector: '[analytics]' })
export class AnalyticsDirective implements OnChanges {
  /**
   * List of supported events for analytics.
   */
  @Input()
  readonly events: AnalyticsEvent[];

  /**
   * Set of properties to attach to the logged events.
   */
  @Input()
  readonly properties: Record<string, Primitive> = {};

  constructor(
    private readonly elementRef: ElementRef,
    private readonly analyticsService: AnalyticsService
  ) {}

  ngOnChanges({ events }: SimpleChanges) {
    if (events) {
      this.registerEvents(this.events)
        .pipe(untilDestroyed(this))
        .subscribe(event => this.logEvent(event, this.properties));
    }
  }
  
  logEvent(event: Event, properties: Record<string, Primitive>) {
    this.analyticsService.logEvent({type: event.type, ...properties});
  }

  registerEvents(events: AnalyticsEvent[]): Observable<Event> {
    const { nativeElement: element } = this.elementRef;
    const eventsObservables = events.map(event => fromEvent<Event>(element, event));
    
    return merge(...eventsObservables);
  }
}