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>