Use Of Route Parameters

Route parameters are used to send data from URL to the component which is open on that URL loading.
For e.g. Suppose we want to open a details page of a user by URL, How can we do that? Here we can use the route parameter. Suppose the user id is 132 then we can create a URL like http://server/user/132 and by using 132 as a user id we can get the user data and display it on the user’s details page.

To use route parameters you have to follow the steps mentioned below.

  • add a route parameter ID
  • link the route to the parameter
  • Add the service that reads the parameter.

Declaring Route Parameters

The route for the component that displays the details for a specific user would need a route parameter for the ID of that user. We could implement this using the following Routes:

:id in the path of the client-details route, which places the parameter in the path. For example, to see the client details page for a client with ID 5, you must use the following URL: localhost:4000/client-details/5

Linking to Routes with Parameters

In the Client List component, you could display a list of clients. Each client would have a link to the client-details route, passing the ID of the client

[routerLink] directive passes an array that specifies the path and the route parameter. Alternatively, we could navigate to the route programmatically.

To navigate URL  from ts file use below code


Reading Route Parameters

The ClientDetails component must read the parameter, then load the client based on the ID given in the parameter.

The ActivatedRoute service provides params Observable which we can subscribe to get the route parameters

By using the id we could fetch client details.

Defining Child Routes

When we have more details for the client like client-project,client-tickets the need to use child routes.
For e.g, if a client has a project tab then to route that tab on the details page we have to specify the route as follows.