0

I have a simple UI

<button
    md-icon-button
    md-tooltip = 'Home'
    [routerLink] = "['new-patient']">
  <i class = 'mdi mdi-home mdi-36px cyanish'></i>
</button>

The routerLink binding above fails, always fails with the following:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

    <a md-icon-button
       [ERROR ->][routerLink] = "['new-patient']"
       color = "accent">
      <md-icon class = "material-icons md-2"): SideNavsComponent@43:7

I understand the error, but is there some way for me to actually add a routerLink to a material2 button or button-icon?

It is rather difficult to accept that such a simple procedure seems so impossible.

I previously asked the question and got an answer that worked in June 2016 - that answer no longer works (How to use material2 toolbar, button and angular-cli router)

Thanks

Community
  • 1
  • 1
st_clair_clarke
  • 5,453
  • 13
  • 49
  • 75
  • 2
    It should be enough to add `RouterModule` to the module where you want to use `routerLink` like `@NgModule({imports: [CommonModule, RouterModule]}) class MyModule {}` – Günter Zöchbauer Nov 02 '16 at 06:34
  • Thanks Gunter. It is interesting that the error gave no hint as to the missing module. – st_clair_clarke Nov 02 '16 at 13:05
  • 1
    It's a generic error. If you get `Can't bind to 'xxx'` it indicates that Angular didn't instantiate a component or directive on this element that has an input with that name to bind to. If the name (`xxx`, or the element name) isn't misspelled, then the cause is that the component or directive wasn't made available to the current module. This is not specific to `routerLink` but applies to every component or directive. – Günter Zöchbauer Nov 02 '16 at 13:12
  • 1
    Thanks for the great explanation Gunter. It will be of great help from now on. – st_clair_clarke Nov 02 '16 at 16:07
  • Hey @GünterZöchbauer, would you like to add it as an answer? – Leo Caseiro Nov 21 '16 at 06:19
  • Thanks for the hint @LeoCaseiro I was waiting for feedback if it helped. – Günter Zöchbauer Nov 21 '16 at 06:21

1 Answers1

3

It's a generic error. If you get Can't bind to 'xxx' it indicates that Angular didn't instantiate a component or directive on this element that has an input with that name to bind to. If the name (xxx, or the element name) isn't misspelled, then the cause is that the component or directive wasn't made available to the current module. This is not specific to routerLink but applies to every component or directive.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567