Угловой материал - сиденав компонент не работает правильно

Question

Я занимаюсь разработкой веб-приложения для разных устройств: рабочего стола, планшета, телефона. Я объединил sidenav и mediaquery (import {MediaMatcher} from '@ angular / cdk / layout';) для определения размера устройства.

Когда я загружаю приложение с размером телефона, открывается sidenav, но когда я меняю размер устройства и возвращаюсь к размеру телефона, sidenav не открывается.

Как мне решить проблему?

Ссылка на ошибочное приложение: Редакторская ссылка

Answer 1

Вы можете использовать Host Listener для прослушивания события изменения размера окна и внесения следующих изменений в ваше приложение.

@HostListener('window:resize', ['$event'])
onResize(event) {
 event.target.innerWidth < 400 ? this.sideNavButtonVisible = true :  this.sideNavButtonVisible = false;
}