Pass more than one parameter on the Angular route

Question

I have an application that uses angular V6, I have a route system where I can pass a parameter, in order to access another component, an id for example, however, I need to pass two parameters in this route that is currently:

{ path: 'edit/:id', component: ProfilesEditComponent }

With the call to that route configured like this:

private edit(item: IProfiles): void {
         this.router.navigate([`/profiles/${this.appId}/edit`, item.id]);
}

With my need to pass two parameters to the route, I’d like something like this:

{ path: ':appId/edit/:id', component: ProfilesEditComponent }

After making the route change, I made the following call:

private edit(item: IProfiles): void {
    this.router.navigate([`/profiles`, this.appId, 'edit', item.id]);
}

However, it does not work, on the console it says that a configured route could not be found.

Is it possible to pass more than one parameter within the route? Because with only one parameter it works normally.

Answer 1

It is possible to pass more than one yes parameter. I didn’t find it in the official documentation, but I believe you can’t start your path with a variable (in your case 'appid'). Try changing the order in the path:

{ path: 'edit/:appId/:id', component: ProfilesEditComponent }

Changing the order also in the call:

private edit(item: IProfiles): void {
    this.router.navigate([`/profiles/edit`, this.appId, item.id]);
}