Menu
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.
700
Link can be added to the Button by adding e-link using cssClass property and <a> tag with href attribute should be added inside the button element.
The <mat-button>, an Angular Directive, is used to create a button with material styling and animations. In this chapter, we will showcase the configuration required to draw a button control using Angular Material.
Angular directing <mat-button> is used to create a button with content styling and animations. Angular content buttons are native <button> or elements enhanced with styling and ink ripples. Native <button> and <a> elements are used to provide the accessible experience for users.
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>Use something like this for a button towards an external URL :
<a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
