title: Open Angular Material Menu Programmatically using ViewChild on MatMenuTrigger
body: <p>How can an Angular Material menu be opened programmatically using Template Reference Variable on button trigger, which is accessed in component using ViewChild?</p>
  
  <p>The menu opens normally on click, but I'd like to open it programmatically on mouseover.</p>
  
  <p>(mouseover) event handler gives error: Cannot read property 'openMenu' of undefined.</p>
  
  <p>So why is clickHoverMenuTrigger undefined in the component?</p>
  
  <p>Here's the component html</p>
  
  <pre><code>&lt;button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" 
    #clickHoverMenuTrigger (mouseover)="openOnMouseOver()"&gt;
    &lt;mat-icon&gt;notifications&lt;/mat-icon&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Here's the component typescript</p>
  
  <pre><code>@ViewChild(MatMenuTrigger) clickHoverMenuTrigger: MatMenuTrigger;
  
  openOnMouseOver() {
    this.clickHoverMenuTrigger.openMenu();
  }
  </code></pre>
  
  <p>This method is documented here <a href="https://material.angular.io/components/menu/overview" rel="noreferrer">https://material.angular.io/components/menu/overview</a></p>
  
  <p>Same problem raised and answered here <a href="https://stackoverflow.com/questions/47080338/how-do-i-access-mat-menu-trigger-from-typescript">How do I access mat menu trigger from typescript</a> (I don't have the reputation to comment on that)</p>
  
  <p>It looks like I'm doing exactly what is stated in the documentation and the StackOverflow solution above.</p>
  
  <p>As clickHoverMenuTrigger is undefined, it must be an issue with @ViewChild.</p>
  
  <p>Code on <a href="https://stackblitz.com/edit/angular-material-open-menu-programmatically" rel="noreferrer">Stackblitz</a>. Open console to see error.</p>