1

I need to check the window size, if it is < 1400 px (laptops), what is the best way to do it?

If it is less than 1400 I would like to set a variable to true for example.

Nemanja G
  • 1,760
  • 6
  • 29
  • 48
  • Perhaps this will help https://stackoverflow.com/questions/35527456/angular-window-resize-event – 0mpurdy Aug 10 '17 at 12:10
  • maybe you should check responsive-design, if you want to adapt your html to different sizes. As far as i know it can be done by css – JohnnyAW Aug 10 '17 at 12:12
  • @JohnnyAW I need to set pageSize of devex grid to 5 if its < 1400px, thats why I need this type of check. – Nemanja G Aug 10 '17 at 12:16

2 Answers2

11

You can get these values like that : 

constructor() {
  // User screen size
  const screenHeight = window.screen.height;
  const screenWidth = window.screen.width;

  // Actual space available in navigator
  const actualHeight = window.innerHeight;
  const actualWidth = window.innerWidth;
}

But this won't change if the user resize it's window.

You can get these new values by using a HostListener :

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.newInnerHeight = event.target.innerHeight;
  this.newInnerWidth = event.target.innerWidth;
}

onResize will be called when the navigator's window is resized. It may be very often, you may need a Subject to handle it.

FatL
  • 171
  • 6
0

HTML:

<div (window:resize)="onResize($event)">  your html here  </div>

JS:

onResize($event){
 this.myVariable = event.target.innerWidth > 1400 ? true : false;
}
Monika V
  • 5
  • 3