routerLink with url segment not working in angular 8

Question

Here is my code:

<span *ngIf="markup.baseline">   
   <mat-icon [routerLink]="['/default-markup', markup.id]">edit</mat-icon>
 </span>
 <span *ngIf="markup.baseline == 0">   
   <mat-icon [routerLink]="[markup.id]">edit</mat-icon>
 </span>

The first link where the url has to be 'default-markup/14' doesnt work. It works correctly for the second condition.

The error is

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'default-markup/14

Here is the code in the routing module:

      {path: ':client', component: MarkupsListComponent, },
      {path: ':client/default-markup', component: MarkupsBaselineComponent,},
      {path: ':client/default-markup/:rule_id', component: MarkupsBaselineComponent,},
      {path: ':client/:rule_id', component: MarkupsDetailComponent,},

what appears in the URL when you click [routerLink]="[markup.id]" link? — Pankaj Parkar
– Pankaj Parkar, Commented Nov 23, 2020 at 5:05
My current page url is markups/brookshuff. When I click on [markup.id], it goes to markups/brookshuff/12. I want that for the other condition it should go to markups/brookshuff/default-markup/14 — smiti
– smiti, Commented Nov 23, 2020 at 5:24
Just try removing / before default-markup. Try [routerLink]="['default-markup', markup.id]" — Pankaj Parkar
– Pankaj Parkar, Commented Nov 23, 2020 at 5:35

Roy · Accepted Answer · 2020-11-23 14:55:52Z

2

You have to remove / before the /default-markup. When you mention / in the URL, it consider it from the root route, otherwise it will be relative to current route.

Use below

[routerLink]="['default-markup', markup.id]"

edited Nov 23, 2020 at 14:55

Roy

8,1295 gold badges29 silver badges49 bronze badges

answered Nov 23, 2020 at 6:27

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tony · Accepted Answer · 2020-11-23 05:34:11Z

1

you have to pass client id for every route change it like this,

<span *ngIf="markup.baseline">   
  <mat-icon [routerLink]="['/', clientId,'default-markup',markup.id]>edit</mat-icon>
</span>
<span *ngIf="markup.baseline == 0">   
  <mat-icon [routerLink]="[clientId]">edit</mat-icon>
</span>

stackblitz example

answered Nov 23, 2020 at 5:34

Tony

9105 silver badges19 bronze badges

Collectives™ on Stack Overflow

routerLink with url segment not working in angular 8

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related