title: angular mat-button link to external url
body: <p>Angular 6 (<a href="https://angular.io/" rel="noreferrer">https://angular.io/</a>) new Project, utilizing the Material Components (<a href="https://material.angular.io/" rel="noreferrer">https://material.angular.io/</a>) ~ How can I navigate to an external URL from a mat-button component.  </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button mat-button [matMenuTriggerFor]="menu"&gt;Menu&lt;/button&gt;
  &lt;mat-menu #menu="matMenu"&gt;
    &lt;button mat-menu-item&gt;Item 1&lt;/button&gt;
    &lt;button mat-menu-item&gt;Item 2&lt;/button&gt;
  &lt;/mat-menu&gt;
  </code></pre>
  
  <p>Typescript</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
    selector: 'menu-overview-example',
    templateUrl: 'menu-overview-example.html',
    styleUrls: ['menu-overview-example.css'],
  })
  
   export class MenuOverviewExample {}
  </code></pre>
  
  <p>Live Edtior: <a href="https://stackblitz.com/angular/maeymnkvlrq" rel="noreferrer">https://stackblitz.com/angular/maeymnkvlrq</a></p>
  
  <p>I believe I am missing something obvious as a novice but am unable to find an answer to my question. </p>