Angular.io [routerLink] passing optional dynamic parameters

Question

I am trying to build navigation links dynamically which also has optional paramteers

<mat-list-item *ngFor="let link of itemSummarylinks" class="app-sidenav-content">
            <a mat-list-item [routerLink]="[link.routerLink,itemCode,'edit']">
                {{link.name}}
            </a>
</mat-list-item>

Below is the route:

 { path: 'general-product-attributes/:id', component: eneralProductAttributesDetailComponent },
 { path: 'general-product-attributes/:id/:edit', component: GeneralProductAttributesEditComponent }

if the path is :

[general-product-attributes/35/Edit] --> it should edit componenet
[general-product-attributes/35]--> it should flow to detail componement

so how to build router dynamically:

[routerLink]="[link.routerLink,itemCode,'edit']"
[routerLink]="[link.routerLink,itemCode,'']"

if i pass empty in the place of edit it should navigate to detail componenet but it give errors , how do i fix this.

You have two ways to manage optional params: 1) you use object like this : [routerLink]="['/general-produt-attributes', {edit:true}]" . With this, you only need 1 route. Or using multi routes and manage the state of each routes using data: {path:'.../edit', data:{idEdit:true}, ...}, {path:'...', data:{isEdit:false}, ...} — Gilsdav, Apr 09 '18 at 18:30

bryan60 · Answer 1 · 2018-04-09T18:21:11.613

4

You need to do it like this:

[routerLink]="[link.routerLink,itemCode]"

if you add a third param, angular thinks it has 3 parameters, the difference is important between 2 parameters and 3 parameters with the third one being blank. the resulting URLS look like:

3 params, one blank: /root/id/

vs 2 parmas: /root/id

In the first case, angular isn't sure where to route you because it can't match "blank" third param to any route

I'm not sure how you tell the diff between if something should be editable or not, but suppose you use a property on the link called "editable", you could use it in a simple expression:

[routerLink]="(link.editable) ? [link.routerLink,itemCode,'edit'] : [link.routerLink,itemCode]"

edited Apr 09 '18 at 18:21

answered Apr 09 '18 at 18:12

bryan60

28,215
4
48
65

But, for edit since the routerLinks are dynamic with loop, how should I pass for edit, detail ? the routerLink itself should be an array with [link,itemCode, optionalParameter] ?? – VR1256 Apr 09 '18 at 18:16
your example shows 'edit' hardcoded, you could use a simple expression binding to accomplish it but I can't tell you how from the example you've given, but I've given a sample in my answer of how it COULD look – bryan60 Apr 09 '18 at 18:19

score 2 · Answer 2 · answered Apr 09 '18 at 18:46

you can use matrix url notation like this: you define only one route

{ path: 'general-product-attributes/:id', component: eneralProductAttributesDetailComponent }

and you can navigate that way in case of edit :

this.router.navigate(['general-product-attributes',itemCode, {edit: true}]);

your Url will show this :

/general-product-attributes/itemCode;edit=true

and in case to show details you don't have to send "edit":

this.router.navigate(['general-product-attributes', itemCode]);

and in your component, you will have to check if edit exist to do your control:

constructor(private route: ActivatedRoute,
          private router: Router) {
 this.route.params.subscribe(params => {
  if (params['edit']) { 
    // do control for edit 
  }
 });
 }

Thanks for the answer. You made my day (y) – Anjana Silva Jul 02 '20 at 20:42 — Anjana Silva, Jul 02 '20 at 20:42

score 0 · Answer 3 · answered Apr 09 '18 at 18:12

0

Try like this

 [routerLink]="[link.routerLink,itemCode]"

answered Apr 09 '18 at 18:12

jonhid

2,075
1
11
18

Angular.io [routerLink] passing optional dynamic parameters

3 Answers3