How to use material2 toolbar, button and angular-cli router

Question

I have the following files:

.html

<nav> <md-toolbar color = "primary"> <a [routerLink] = "['new-patient']">New Patient</a> <button md-icon-button color = "accent"> <md-icon class = "material-icons md-24">person_add</md-icon> </button> </md-toolbar> </nav> 

.ts

 import { Component, OnInit } from '@angular/core'; import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router'; import { MdToolbar } from '@angular2-material/toolbar'; import { MdIcon, MdIconRegistry } from '@angular2-material/icon'; import { MdButton } from '@angular2-material/button'; @Component({ moduleId: module.id, selector: 'epimss-toolbar', templateUrl: 'toolbar.component.html', styleUrls: ['toolbar.component.css'], providers: [MdIconRegistry], directives: [MdButton, MdIcon, MdToolbar, ROUTER_DIRECTIVES], }) export class ToolbarComponent implements OnInit { constructor() {} ngOnInit() { } } 

My router works with the above code.

However i try

 <a [routerLink] = "['new-patient']">New Patient</a> 

- the route that is activated when

 <button md-icon-button color = "accent"> <md-icon class = "material-icons md-24">person_add</md-icon> </button> 

.

I tried the following, but it does not work.

 <button md-icon-button color = "accent" [routerLink] = "['new-patient']"> <md-icon class = "material-icons md-24">person_add</md-icon> </button> 

Appreciate any help received, please, and thanks.

Answer 1

Your problem is that the new router does not accept [routerLink] on <button> elements, only <a> tags.

But you're in luck, the material allows you to make an icon on <a> and <button>

Material Documents on MD Button

So try the following:

 <a md-icon-button [routerLink] = "['new-patient']" color = "accent"> <md-icon class = "material-icons md-24">person_add</md-icon> </a>