Angular 2 routerlink not clickable in Material 2 Toolbar

Question

The routerLink directive has no effect in the md-toolbar component of Material 2.

toolbar.component.html:

<md-toolbar color="primary">
  <a routerLink="/email-login" routerLinkActive="active"> Email </a>
</md-toolbar>

I have a route module with all the routes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// Application Pages;
/* Public Pages */
import { EmailLoginPage } from './pages/public/email-login.page';
import { LinkedinLoginPage } from './pages/public/linkedin-login.page';
/* Private Parent Page */
import { Dashboard } from './pages/authenticated/dashboard';
/* Private Pages */
import { RecordsPage } from './pages/authenticated/records.page';

const routes: Routes = [
  { path: 'email-login', component: EmailLoginPage },
  { path: 'linkedin-login', component: LinkedinLoginPage },
  {
    path: 'dashboard',
    component: Dashboard,
    canActivate: [],
    children: [
      { path: 'records', component: RecordsPage },
      { path: '', component: RecordsPage }
    ]
  },
  {
    path: '',
    redirectTo: '/email-login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class RoutingModule {}

Does this have anything to do with the fact that the link is set as child element of a Material Directive? If so what is the best way to go about doing this?

Thanks.

There are no errors in the console. No effect means when I click on the link nothing happens. — Aaron, Dec 07 '16 at 23:42
I am getting the same issue. I have Angular Material2 with a Button component, I applied a routerLink directive and a simple relative url and nothing happens when I click. No errors in console. — cuznerdexter, Dec 19 '16 at 14:08

Dinesh Rathod · Answer 1 · 2017-05-01T05:33:52.763

1

Sample:

  <md-menu #menu="mdMenu"> 
  <button md-menu-item [routerLink] ="['/Settings']">
  <md-icon>voicemail</md-icon>
          <span> Settings </span>
   </button>
 </md-menu>

Hope you set up routes correctly.

edited May 01 '17 at 05:33

answered May 01 '17 at 04:46

Dinesh Rathod

21
3

score 0 · Answer 2 · answered Oct 11 '17 at 15:12

0

Tried removing the leading slash?

<md-toolbar color="primary">
  <a routerLink="email-login" routerLinkActive="active"> Email </a>
</md-toolbar>

And make sure you are handling the component in the .module file.

answered Oct 11 '17 at 15:12

Kay

17,906
63
162
270

Angular 2 routerlink not clickable in Material 2 Toolbar

2 Answers2