Setting up Dynamic Routes

Dynamic routes are used to load dynamic data into the routes. They can load different data models on the same route.

What do we want to achieve?

We need three dynamic routes in our application:

• The edit route: To edit products, we need to load them first. Every product has a unique ID. We need to load the data model to the edit route based on that ID’. Here, we need the URL to be http://localhost:4200/admin/edit/<id>.
• The category route: We need to show products by category to the users. There can be several categories in our application, and we can’t make a separate route for each category. We need to make the category route dynamic to load different categories with different data models. Here, we want the URL to be http://localhost:4200/cateogry/<category_name>.
• The item route: This is a nested route that we can load through the category route. This route is responsible for loading product details. This route loads the data model based on the product ID. Here, we want the URL to be http://localhost:4200/cateogry/<category_name>/item/<id>.

Making routes dynamic

To make routes dynamic, we need to specify them in the router.js file in that route’s path. Let’s add paths to the router.js file: