From ce4d1d8b1238022c70cc5c73a09e7dc94106431b Mon Sep 17 00:00:00 2001
From: Ibby Hadeed <ibby93@gmail.com>
Date: Mon, 11 Sep 2017 06:14:37 -0400
Subject: [PATCH] refactor(): use HostListener instead of host property

Comply with Angular Style Guide 06-03
---
 src/tooltip.directive.ts | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/tooltip.directive.ts b/src/tooltip.directive.ts
index 4c1e359..b0ee52a 100644
--- a/src/tooltip.directive.ts
+++ b/src/tooltip.directive.ts
@@ -1,18 +1,12 @@
 import {
   Directive, ElementRef, Input, ApplicationRef, ComponentFactoryResolver,
-  ViewContainerRef, ComponentRef, AfterViewInit
+  ViewContainerRef, ComponentRef, AfterViewInit, HostListener
 } from '@angular/core';
 import { Platform } from 'ionic-angular';
 import { TooltipBox } from './tooltip-box.component';
 
 @Directive({
-  selector: '[tooltip]',
-  host: {
-    '(press)': 'event === "press" && trigger()',
-    '(click)': 'event === "click" && trigger()',
-    '(mouseenter)': 'event === "hover" && active = true',
-    '(mouseleave)': 'event === "hover" && active = false'
-  }
+  selector: '[tooltip]'
 })
 export class Tooltip implements AfterViewInit {
 
@@ -142,6 +136,26 @@ export class Tooltip implements AfterViewInit {
 
   }
 
+  @HostListener('click')
+  onClick(): void {
+    if (this.event === 'click') this.trigger();
+  }
+
+  @HostListener('press')
+  onPress(): void {
+    if (this.event === 'press') this.trigger();
+  }
+
+  @HostListener('mouseenter')
+  onMouseEnter(): void {
+    if (this.event === 'hover') this.active = true;
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave(): void {
+    if (this.event === 'hover') this.active = false;
+  }
+
   private _createTooltipComponent() {
     let
         viewport: ViewContainerRef = (<any>this.appRef.components[0])._component._viewport,