Is it possible to set a variable value based on screen size in angular using bootstrap?

Question

I have a global variable in an angular component like so,

visibleDays = 7

I want to be able to control this value based on screen size. For smaller devices, I want this to be 3 instead of 7. Is it possible to do this for "sm", "xs" devices?

Answer 1

you can track windows size and base of innwewidth update the value of visibleDays

app.component

  visibleDays = 7;

  @HostListener("window:resize", []) updateDays() {
    // lg (for laptops and desktops - screens equal to or greater than 1200px wide)
    // md (for small laptops - screens equal to or greater than 992px wide)
    // sm (for tablets - screens equal to or greater than 768px wide)
    // xs (for phones - screens less than 768px wide)
  
    if (window.innerWidth >= 1200) {
      this.visibleDays = 7; // lg
    } else if (window.innerWidth >= 992) {
      this.visibleDays = 6;//md
    } else if (window.innerWidth  >= 768) {
      this.visibleDays = 5;//sm
    } else if (window.innerWidth < 768) {
      this.visibleDays = 3;//xs
    }
    
  }

stackblitz demo 🚀🚀