Angular (mouseenter), (mouseleave) disable based on screensize

Issue

I am using angular mouseenter() and mouseleave() for adding a class for making a block width from 50px to 300px on hover. But, in mobile there is no such thing like hover. Can I disable this based on screensize or it doesn't work in mobile?

Note: I know that I can change styles of the class based on screensize. Just checking if there is any other way.

Solution

You could utilise the touch events to determine if it's touch based device. It'd still be a workaround since we aren't actually checking for the screen size but assume if the touch events are triggered, then it must be a device with a small footprint.

Controller

export class AppComponent implements OnInit {
  private isTouchEvent: boolean;    // set to true if the button press is registered as touch event

  public touchDown(event: any) {
    this.isTouchEvent = true;
    // handle event without applying class
  }

  public touchUp(event: any) {
    this.isTouchEvent = true;
    // handle event without applying class
  }

  public touchLeave(event: any) {
    this.isTouchEvent = true;
    // handle event without applying class
  }

  public mouseDown(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }

  public mouseUp(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }

  public mouseLeave(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }

  public mouseEnter(event: any) {
    if (!this.isTouchEvent) {
      // apply class and handle event
    }
  }
}

Template

<div
  (touchstart)="touchDown($event)"
  (touchend)="touchUp($event)"
  (touchmove)="touchLeave($event)"
  (mousedown)="mouseDown($event)"
  (mouseup)="mouseUp($event)"
  (mouseenter)="mouseEnter($event)"
  (mouseleave)="mouseLeave($event)"
>
</div>

Answered By - ruth