Angular Routing By Expression

Question

I m new to Angular and learning the angular routing part

Here for the first and second router link, i have used static path and for the third one, i tried with expression and i have a input text box whose model is 'myRoute'.. i m trying to type 'third' in the textbox and the value is binding into the model 'myRoute' and i have a component, 'ThirdComponent', defined in the route, but it doesnt work

<input type="text" [(ngModel)]='myRoute'>
<nav>
  <ul>
     <li><a routerLink="first">First</a></li> 
     <li><a routerLink="second">Second</a></li>
     <li><a [routerLink]="['myRoute']">Third</a></li>

  </ul>
</nav>

Here is my route

const appRoutes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: 'second', component: SecondComponent },
  { path: 'third', component: ThirdComponent }
];

Here is the error message which i m receiving

Error: Cannot match any routes. URL Segment: 'myRoute' Error: Cannot match any routes. URL Segment: 'myRoute'

And i m clicking the third component link only after i enter the text 'third' in the textbox

Answer 1

In your original code, you bind routerLink to the literal string 'myRoute', as explained in this answer. The following syntax binds routerLink to the property myRoute of the component class:

<a [routerLink]="myRoute">

Answer 2

From your error message it seems that 'myRoute' has passed as string to the router whereas, in your router, you have path defined for 'third' not for 'myRoute'. Check the data-binding on 'myRoute'.

<a [routerLink]="myRoute">

should do it!