0

I am using angular ng2-admin and trying to hide the menu items for lower resolutions. And the menu is not closing in mobile view instead blocking the view of half of the content.

Current behavior:

On low resolutions, menu should close itself when we click on a link, or when we click outside of the menu. Currently, the menu doesn't collapse on either situations, and is blocking the view of half of the content of the site on resolution width < 1200px

Expected behavior:

When resolution is 1200px or lower, when the menu is expanded, when we click a menu item or click outside the menu it should close itself.

vishnu
  • 4,377
  • 15
  • 52
  • 89

1 Answers1

0

Consider using "breakpoint" api:

.ts

import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';

isHandset$: Observable<boolean> = this.breakpointObserver
.observe(Breakpoints.Handset)
.pipe(
  map(result => result.matches),
  shareReplay()
);

constructor(
public breakpointObserver: BreakpointObserver,
) {}

.html

<div *ngIf="isHandset$"></div>
elonaire
  • 1,846
  • 1
  • 11
  • 17