angular mat-button link to external url

Question

Angular 6 (https://angular.io/) new Project, utilizing the Material Components (https://material.angular.io/) ~ How can I navigate to an external URL from a mat-button component.

HTML

<button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-menu #menu="matMenu">   <button mat-menu-item>Item 1</button>   <button mat-menu-item>Item 2</button> </mat-menu> 

Typescript

import {Component} from '@angular/core';  @Component({   selector: 'menu-overview-example',   templateUrl: 'menu-overview-example.html',   styleUrls: ['menu-overview-example.css'], })   export class MenuOverviewExample {} 

Live Edtior: https://stackblitz.com/angular/maeymnkvlrq

I believe I am missing something obvious as a novice but am unable to find an answer to my question.

Answer 1

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>

Answer 2

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

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