角材料 - sidenav 组件无法正常工作

Question

I am developing a web app for different devices : Desktop, Tablet, phone. I have combined the sidenav and mediaquery ( import {MediaMatcher} from '@ angular / cdk / layout'; ) for the device size detection.

When i load a app with a phone size the sidenav opens, but when i change the device size and return to the phone size the sidenav does not open.

How can I solve the problem?

Link of the bugged app: Editor link

Answer 1

You can make use of Host Listener to listen to window resize event and make the following changes in your app.

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