title: Angular2: touchStart and touchEnd are not responding properly in mobile view
body: <p>In css we have hover property, so to apply that hover in mobile view I am trying to apply touchstart and touchend events. But events are not responding properly.</p>
  
  <p>Below are my both events</p>
  
  <pre><code> @HostListener('touchstart', ['$event']) onTouchStart(event: Event): void {
      if (event) {
        event.preventDefault();
      }
      let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
      this.renderer.setElementStyle(part, 'color', 'green');
    }
  
  
  
    @HostListener('touchend', ['$event']) onTouchEnd(event: Event): void {
      if (event) {
        event.preventDefault();
      }
      let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
      this.renderer.setElementStyle(part, 'display', 'yellow');
    }
  </code></pre>
  
  <p>Below is my css</p>
  
  <pre><code>.account-outlook-wrapper {
    .icon-interface-question-mark {
      color: yellow;
      position: relative;
      cursor: pointer;
  
      &amp;:hover {
        color: green;
      }
    }
  </code></pre>
  
  <p>To check it, I changed the normal css to </p>
  
  <pre><code>.account-outlook-wrapper {
        .icon-interface-question-mark {
          color: orange;
          position: relative;
          cursor: pointer;
  
          &amp;:hover {
            color: red;
          }
        }
  </code></pre>
  
  <p>But because of touchstart event, the color was green in window browser although it was supposed to work in mobile view only. Please let me know If I am not using both events properly</p>