Route params and Query params

What are route parameters?

We have unique identifiers that allow us to access a particular item in a list. We pass that unique identifier as a route parameter to our route and display the view of the details of the item associated with that particular identifier. These are the variables passed within the routes whose value depends on the chosen product or item. In the previous lesson, you were acquainted with the use of route parameters. Our goal in this lesson is to understand what that means and how can we use route parameters in our application.

Here, the common route is the user that is a constant route whereas :id is a placeholder for the variable route which is dependent on which product is chosen. We can have multiple variable routes too in the application. For example,

localhost:4200/user/:id/products/:num

Configuring the route parameter

{path: ‘user/:id’, component: UserDetails}

To activate the routes that have route parameters passed in, use the following syntax.

From the template

<a [routerLink] = “[‘/user’, user.id]”>{{user.userName}}</a>

<a [routerLink] = “[‘/user’, 0]”>Create User</a>

In the first line of code, the id of the user is passed, and this redirects the view to the user details with that id. However, if the id is passed as 0, it should redirect the view to create a new user since 0 is not associated with any user yet. Similarly,

From the Component, this.router.navigate([‘/user’, this.user.id])

This will navigate to the view of the user with this id and will appear in the browser as something like this.

The view displays the URL against the user with id 5. But as you ...