Route parameters

· angular

If we do a comparison of route URLs and those you may already be familiar with, we can consider router parameters to be similar to the query string parameters you might find when searching for products on a web site after completing a search term in a form.

Route parameters are simply extra bits of information that help your application be more specific in the page or pages that are served up. Your Angular app may be responsible for displaying a list of products initially and will then display detailed information on a specific product when a user clicks the product in the list. The router parameter is what will be used to identify the correct product to display.

In order to use route parameters, you need to complete a few simple steps in your code:

add the route parameter in your routes
Link to the proper routers with parameters
Read the route parameters in order to load the correct data

{ path: '', redirectTo: 'all-products', pathMatch: 'full' },
{ path: 'all-products', component: ProductList },
{ path: 'product-details/:id', component: ProductDetails }
];

The last entry in this Routes section is product-details/:id. The :id portion is the route parameter and will be replaced by the value passed into the URL, in this case an id of 1, such as:

http://products.html/product-details/1

In the tutorial lab you will configure and use parameters with the routes you configure for the Git Search application.