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.

score 44 · Accepted Answer · answered May 26 '18 at 16:39

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>

score 38 · Answer 2 · answered May 26 '18 at 16:06

38

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

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

answered May 26 '18 at 16:06

Al Caulique

451
4
7

Just checked @AppDreamer It does work in Angular 9 too. It is just that I don't see any errors when the MatButtonModule is not imported, so it takes a few minutes to figure out whats wrong. After importing and manually restarting (stop and then ng serve) it works as expected. – iCrus Apr 04 '20 at 13:45

score 6 · Answer 3 · answered May 26 '18 at 16:11

6

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

answered May 26 '18 at 16:11

Sajeetharan

216,225
63
350
396

Demo link gives 404 error – rofrol Jul 20 '23 at 14:20

score 5 · Answer 4 · edited Jun 08 '20 at 13:31

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-address@gmail.com?subject='I need help'&body='write some message'";
  }
}

score 0 · Answer 5 · answered May 26 '18 at 16:14

Use click event and window.open Method to navigate to external URL

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

Component:

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

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

     export class MenuOverviewExample {
      onClick()
{
  window.open("URL");

}}

LIVE DEMO

score 0 · Answer 6 · answered Aug 06 '19 at 10:30

This will create a nice menu icon with your requirement,

<a style="cursor: pointer">
    <i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu"
    matTooltip="Menu">more_vert</i></a>

    <mat-menu #selectMenu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>

You can see how this code works in STACKBLITZ

angular mat-button link to external url

6 Answers6