angular - Why isn't my Router redirecting? -

my angular project structure follows:
index.html contains <app-root></app-root>, app.component.
app component has following structure:

<md-toolbar>   <ng-template #notloggedin>     <a md-icon-button [md-menu-trigger-for]="topnavusermenu">       <md-icon>person_add</md-icon>     </a>     <md-menu #topnavusermenu="mdmenu">       <button md-menu-item>         <md-icon>fingerprint</md-icon>         <span><a [routerlink]="['/login']" routerlinkactive="active">login</a></span></button>       <button md-menu-item>         <md-icon>mode_edit</md-icon>         <span><a [routerlink]="['/signup']">register</a></span></button>     </md-menu>   </ng-template> </md-toolbar> <md-sidenav-container>   <router-outlet></router-outlet> </md-sidenav-container>   

basically, app.component persistent across app, , content rendered through router-outlet. if user selects "login" toolbar menu, desired behavior app redirect url, however, when user clicks link, nothing happens.

why happening? how fix it?

note: aware pragmatically adding navigate function app.component , binding button's click, example:

test() {     this.router.navigate(['/login']);   } 

i more interested in why doesn't work html directives, works flawlessly js.

for novice , find information useful, @birwin's claim correct - anchor tag illegal in button. need change:

<button md-menu-item>         <md-icon>mode_edit</md-icon>         <span><a [routerlink]="['/signup']">register</a></span> </button> 

to:

<button md-menu-item [routerlink]="['/signup']">         <md-icon>mode_edit</md-icon>         <span>register</span> </button>