angular mat-button link to external url

You can use

<mat-menu #menu="matMenu">
  <button mat-menu-item  onClick="window.open('//google.com')">Item 1</button>
  <button mat-menu-item  onClick="window.open('//yahoo.com')">Item 2</button>
</mat-menu>

DEMO STACKBLITZ


You can change the button attribute to an a with the same design of a button

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <a href="http://www.google.com" mat-menu-item>Item 1</a>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Using window.open will work, but if you are doing something like "mailto", you will end up with a unnecessary blank tab opening in your browser. I suggest using "location.href = " instead... so... in short... whether it's a button or a menu doesn't matter, in your HTML,

  <button mat-raised-button (click)="emailSupport()" style="width:180px;">
    Contact Support
  </button>

Then in your .ts file...

  import {Component} from '@angular/core';

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})

 export class MenuOverviewExample {
  ...
  emailSupport(){
     location.href = "mailto:[email protected]?subject='I need help'&body='write some message'";
  }
}

Use something like this for a button towards an external URL :

<a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a>