13

I am unable to navigate with router link attribute that is placed within the button tag. Here is my code,

<button mat-raised-button color="primary"><a routerLink="/message-inbox">Inbox</a></button>
    <button mat-raised-button color="accent"><a routerLink="/sent">Sent</a></button>
    <a routerLink="/message-compose"><button color="warn">Compose</button></a>
Karty
  • 1,329
  • 6
  • 21
  • 32

5 Answers5

41

You can apply routerLink to the button directly. It doesn't have to be an <a element

<button mat-raised-button color="primary" routerLink="/message-inbox">Inbox</button>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 5
    I dint import the the router module. It worked after that – Karty Dec 05 '17 at 11:17
  • 2
    Same for me.. after importing it in the .ts file it started working for the button element (mat-button) in my case- even though other ` – Piotr Kula Aug 06 '18 at 10:19
21

I dint import the the router module. It worked after that,

import { RouterModule } from '@angular/router';
Karty
  • 1,329
  • 6
  • 21
  • 32
  • That is very peculiar that you have to import this so you can use it on buttons. With `a` anchors it is not needed... weird? But thanks. – Piotr Kula Aug 06 '18 at 10:18
  • Thanks! It was my problem. You could have clarified a bit your answer for new-comers specifiying the import + the declaration: ``` import { RouterModule } from '@angular/router'; @NgModule({ declarations: [], imports: [ RouterModule ], exports: [] }) export class MyClass{ } ``` – JibZ Dec 17 '20 at 08:06
3

Don´t nest anchors inside buttons, it's not HTML5 compatible and doesn´t work in some browsers, like Firefox. It´s better to apply routerLink to the button directly, as Günter Zöchbauer said

Carlos Cuesta
  • 1,262
  • 1
  • 17
  • 20
1

What if you try something like this: 

<button mat-raised-button color="primary">
<a [routerLink]="['/message-inbox']">Inbox</a>
</button>
    <button mat-raised-button color="accent">
<a [routerLink]="['/sent']">Sent</a>
</button>
    <a [routerLink]="['/message-compose']"><button color="warn">Compose</button></a>

Hope i helps you!!

federico scamuzzi
  • 3,708
  • 1
  • 17
  • 24
0

As was previously mentioned, don't nest anchors inside buttons, as it's not HTML5 compatible. In your case, since you're using Angular Material, it is ideal to do the following:

<a mat-raised-button color="primary" routerLink="/message-inbox">
  Inbox
</a>

This creates an anchor tag that is styled like a button. This comes with all the benefits of a link:

  1. User can hover to preview link destination URL
  2. User can right-click, which opens up many options to work with the link (Open in new tab/window, Copy link address, etc.)

From the Angular Material Button docs:

Accessibility

Angular Material uses native <button> and <a> elements to ensure an accessible experience by default. A <button> element should be used for any interaction that performs an action on the current page. An <a> element should be used for any interaction that navigates to another URL. All standard accessibility best practices for buttons and anchors apply to MatButton.

JWess
  • 602
  • 7
  • 17