MdMenu restent toujours ouvert et ne ferment jamais, anguleux 2+

J'utilise conception Matériel pour angulaire 2, j'ai commencé tout à l'heure et je suis en train d'utiliser MdMenu afin d'afficher un menu lorsque la l'écran a une petite taille. Mon problème est que le menu reste toujours ouvert et ne ferme jamais et je ne comprends pas comment cela fonctionne. Dans ma première expérience avec la conception matérielle, je travaille avec Flex-Layout pour Angular 2 aussi.MdMenu restent toujours ouvert et ne ferment jamais, anguleux 2+

Voici mon code

app-container.component.html

<md-card fxFlex="100" fxLayout="row" fxLayoutAlign="start center"> 
    <div fxFlex="50" fxLayoutGap="10px" fxLayout="row" fxLayoutAlign="start center" fxHide.lt-md="true"> 
    <button md-button class="title">UniNow</button> 
    <button md-button> 
     <md-icon>home</md-icon> 
     <span>Home</span> 
    </button> 
    <button md-button> 
     <md-icon>work</md-icon> 
     <span>Lavoro</span> 
    </button> 
    </div> 
    <div fxFlex="50" fxLayoutGap="10px" fxLayout="row" fxLayoutAlign="end center" fxHide.lt-md="true"> 
    <button md-button> 
     <span>{{user.firstName}}</span> 
    </button> 
    <img src="/assets/profile-image.jpg" style="width: 50px; height: 50px; border-radius: 50%"> 
    </div> 
    <div fxLayoutAlign="start center" fxFlex="50" fxShow.gt-sm="false" fxShow.lt-md="true" > 
    <button md-button class="title">UniNow</button> 
    </div> 
    <div fxFlex="50" fxShow.gt-sm="false" fxShow.lt-md="true" fxLayoutAlign="end center"> 
    <button md-icon-button [mdMenuTriggerFor]="menu"> 
     <md-icon>more_vert</md-icon> 
    </button> 
    </div> 
    <md-menu #menu="mdMenu" [overlapTrigger]="false"> 
    <button md-menu-item class="menu-button">Item 1</button> 
    <button md-menu-item class="menu-button">Item 2</button> 
    </md-menu> 
</md-card>

app-container.component.ts

import { Subscription } from 'rxjs/Rx'; 
import { Student } from '../model/student'; 
import { Router, ActivatedRoute, ParamMap } from '@angular/router'; 
import { AppContainerService } from './app-container.service'; 
import 'rxjs/add/operator/switchMap'; 

import { Component, OnDestroy, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-un-app-container', 
    templateUrl: './app-container.component.html', 
    styleUrls: ['./app-container.component.scss'] 
}) 
export class AppContainerComponent implements OnInit { 

    constructor(
    private route: ActivatedRoute, 
    private router: Router, 
    private appContainerService: AppContainerService 
) {} 

    user: Student; 
    userId: string; 

    studentGet$: Subscription; 

    ngOnInit(): void { 
    this.studentGet$ = this.route.paramMap 
     .switchMap((parametroId: ParamMap) => { 
     this.userId = parametroId.get('idutente'); 
     return this.appContainerService.getStudent(this.userId); 
     }) 
     .subscribe(user => { 
     this.user = user; 
     }); 
    } 

}

app-container.module .ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FlexLayoutModule } from '@angular/flex-layout'; 
import { MdMenuModule, MdCardModule, MdButtonModule, MdIconModule } from '@angular/material'; 

import { AppContainerRoutingModule } from './app-container-routing.module'; 

import { AppContainerService } from './app-container.service'; 
import { AppContainerComponent } from './app-container.component'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FlexLayoutModule, 
    MdCardModule, 
    MdButtonModule, 
    MdIconModule, 
    MdMenuModule, 
    AppContainerRoutingModule, 
    ], 
    declarations: [ 
    AppContainerComponent, 
    ], 
    providers: [ 
    AppContainerService, 
    ] 
}) 
export class AppContainerModule { }

app-container.component.scss

@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600'); 

$uninow-app-primary: #1976D2; 
$uninow-app-accent: #CDDC39; 
$uninow-app-warn: #F44336; 
$uninow-app-primary-light: #BBDEFB; 
$uninow-text-primary-color: #FFFFFF; 
$uninow-secondary-text-color: #757575; 
$uninow-text-primary-color-light: #212121; 
$uninow-divider-color: #BDBDBD; 



md-card.mat-card { 
    background-color: $uninow-app-primary; 
    border-radius: 0; 
    padding: 10px; 
} 

button { 
    font-family: 'Open Sans', sans-serif; 
    font-size: 18px; 
    color: $uninow-text-primary-color; 
    font-weight: 700; 
} 

button.title { 
    color: $uninow-text-primary-color; 
    font-size: 32px; 
    font-family: 'Slabo 27px', serif; 
    font-weight: 300; 
} 

button.menu-button { 
    color: $uninow-text-primary-color-light; 
}

Ceci est le résultat lorsque je clique sur le bouton de menu, et après un clic partout pour le fermer (mais il est encore ouvert):

Image when i click the button on small screen