How to router.navigate to a route with an id placeholder inmidst the route url

Question

I have a route url like:

    /departments/:id/employees/assign'

When I navigate to the above url:

    this._router.navigate(['/departments/:id/employees/assign', id]);

Then angular is always appending the passed id to the end of the url, but that is not what I want.

When I try this

    this._router.navigate(['/departments/:id/employees/assign', {id: id}]);

I get this url in the browser:

    http://localhost:4200/departments/%3Aid/employees/assign;id=1

I want the url to be in the browser: /departments/1/employees/assign

What do I have to change?

Answer 1

Use template literals to form dynamic urls like this:

[`/departments/${id}/employees/assign`]