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

what error are you getting? – alokstar Oct 25 '18 at 20:19 — alokstar, Oct 25 '18 at 20:19
@alokstar edited my question with error message. – NewBee Oct 25 '18 at 20:23 — NewBee, Oct 25 '18 at 20:23

ConnorsFan · Answer 1 · 2018-10-25T20:34:24.850

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">

edited Oct 25 '18 at 20:34

answered Oct 25 '18 at 20:24

ConnorsFan

70,558
13
122
146

Thanks. it worked. thanks a lot. i m not able to accept this answer within 6 minutes of this post. will accept it later.. – NewBee Oct 25 '18 at 20:27
But just would like to know, this is the binding syntax and the one which i have used is called?? i m new to this.. so not having an idea , i just refered some website and included that way – NewBee Oct 25 '18 at 20:28
You bound the `routerLink` property to the literal string `'myRoute'`. In my answer, it is bound to the property `myRoute`. – ConnorsFan Oct 25 '18 at 20:29

score 0 · Accepted Answer · answered Oct 25 '18 at 20:26

0

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!

answered Oct 25 '18 at 20:26

alokstar

499
2
7

1

Thanks. it worked. thanks a lot. i m not able to accept this answer within 6 minutes of this post. will accept it later.. – NewBee Oct 25 '18 at 20:27

Angular Routing By Expression

2 Answers2