router link attribute within the button tag doesnt work

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>

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


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!!


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

import { RouterModule } from '@angular/router';