Блог

Мне нужно изменить медиа-запрос в ts-файле, потому что моя переменная visible показывает видимую панель, если ширина <580 пикселей = true. Мне нужно решение, как узнать в файле ts, когда разрешение ниже 580 пикселей, чтобы установить для переменной значение true.

 TS.file

  showSideBar = false;

SCSS. file

.aside-bar {
   @media(max-width: 580px) {
     ....any value
  }
}
  

Вы можете использовать что-то подобное в обычном js. https://www.w3schools.com/howto/howto_js_media_queries.asp

Вы можете использовать .matches в примере, чтобы задать свое значение.

 function doCheck(query) {
  if (query.matches) { // If media query matches
    document.querySelector('.aside-bar').innerHTML = 'red'
  } else {
    document.querySelector('.aside-bar').innerHTML = 'blue'
  }
}

const query = window.matchMedia("(max-width: 400px)")
doCheck(query) // Call listener function at run time
query.addListener(doCheck) // Attach listener function on state changes  

 .aside-bar {
  width: 100px;
  height: 100px;
  color: white;
  background: blue;
}
  
@media(max-width: 400px) {
  .aside-bar {
    background: red;
  }
}  

 <div class="aside-bar">aside bar</div>  

Я бы использовал угловые наблюдатели компоновки cdk для получения наблюдаемого

https://material.angular.io/cdk/layout/overview

 @Component({...})
class MyComponent {
  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait
    ]).subscribe(result => {
      if (result.matches) {
        this.activateHandsetLayout();
      }
    });
  }
}
  

 @Component({...})
class MyComponent {
  constructor(mediaMatcher: MediaMatcher) {
    const mediaQueryList = mediaMatcher.matchMedia('(min-width: 1px)');
  }
}