title: Angular Material Menu module: Export of name 'matMenu' not found
body: <p>I have a little issue with Angular Material Menu module.</p>
  
  <p>I have this code in my <strong>app.module.ts</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { SharedModule } from './shared/shared.module';
  
  @NgModule({
    declarations: [
      // ...
    ],
    imports: [
      SharedModule,
    ],
  })
  export class AppModule { }
  </code></pre>
  
  <p>In my <strong>shared.module.ts</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { CommonModule } from '@angular/common';
  import { NgModule } from '@angular/core';
  import { MatMenuModule } from '@angular/material/menu';
  import { ListDropdownComponent } from './list-dropdown/list-dropdown.component';
  
  @NgModule({
    declarations: [
      ListDropdownComponent,
    ],
    imports: [
      MatMenuModule,
    ],
    exports: [
      ListDropdownComponent,
    ],
  })
  export class SharedModule { }
  </code></pre>
  
  <p>In my <strong>list-dropdown.component.ts</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
  
  @Component({
    selector: 'app-list-dropdown',
    templateUrl: './list-dropdown.component.html',
    styleUrls: ['./list-dropdown.component.scss']
  })
  export class ListDropdownComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
    }
  }
  </code></pre>
  
  <p>In the <strong>list-dropdown.component.html</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button mat-icon-button [matMenuTriggerFor]="menu"&gt;
    My dropdown menu
  &lt;/button&gt;
  &lt;mat-menu #menu="matMenu"&gt;
    &lt;!-- ... --&gt;
  &lt;/mat-menu&gt;
  </code></pre>
  
  <p>Then I have this error message:</p>
  
  <pre><code>Error: Export of name 'matMenu' not found!
  </code></pre>
  
  <p>I can't see where is the problem here?</p>