Using template in angular 2 based on window size

Question

On my template, I have 2 divs. one for table view(laptop) and one for list view(mobile view).

In my .ts file, I want to get the window size so that based on this size, I can choose which div i want to call using ngIf.

In the constructor of the .ts file, I have:

let windowSize: number; 
this.windowSize = innerWidth + innerHeight;
window.addEventListener("resize", function() {
    this.windowSize = innerWidth + innerHeight";
});

But when i console.log() this.windowSize, I dont get the change when the window is resized. What am i missing?

Answer 1

This can be set with simple css:

 @media (min-width: 500px) and (max-width: 700px) {
    .div1 {
      display: none;
    }

 @media (min-width: 701px) and (max-width: 900px) {
    .div2 {
      display: none;
    }