In this lecture, we are going to learn a couple more things about query parameters.
At the moment, we are updating the query parameter whenever the user selects an option.
We're able to update the query parameter with the navigate by URL function.
This solution works great.
However, there are other solutions at our disposal for adding query parameters to a URL.
Let's explore those options in your editor.
Open the Manage Component Class file.
Inside the SALT method, we are going to replace the navigate by URL function with a function called
Navigate.
Angular defines two methods for performing navigation programmatically.
They navigate by URL function is the simpler of the two.
It accepts a string as the path to redirect the user to the navigate function is more complex but powerful,
and allows us to customize the behavior of the router.
Unlike the URL function, the first argument of this function is an array of paths.
We can construct a path by passing in each segment.
For example, let's say we want to navigate the user to the clip, slash a path we can pass in these
segments as strings.
The URL will be constructed based on these values.
By default, the path is absolute.
We can override this behavior by passing in an object as the second argument to the navigate function.
The object can't contain configuration settings for the router in the resource section of this lecture,
I provide a link to the navigate function.
Under the list of parameters, the second argument is referred to as extras in the second column of
this table.
We will find the type annotation for this argument.
We can click on this annotation to learn more about the structure of this object.
According to the documentation, it says the following options that modify the route or navigation strategy
supply an object containing any of these properties to a route or navigation function to control how
the target URL should be constructed or interpreted as far as helpful information goes.
This page doesn't provide more info in these cases.
I always recommend checking out the code snippet.
Looking closely, we will find a pair of comments.
These comments will tell us where these properties are inherited from.
It's likely that documentation for these properties can be found from these interfaces.
We're interested in learning about the relative to property, according to the comments.
It'll tell us this property comes from the URL create options interface.
Let's click on it.
On this page, if we scroll down to the properties section, we will find the documentation for this
property.
Great.
It's always good to learn how to navigate the documentation.
Angular is exceptionally well documented.
You can discover documentation for everything if you know how to search through the documentation.
The property we're looking at will allow us to change the path from an absolute path to a relative path.
The type of value it's expecting is an instance of the activated route function.
It just so happens.
We have an instance of this class and our components.
Let's go back to our ED.
Inside the configuration object, we all add the relative to property.
Its value will be the this root object.
We injected the activated route service into our component.
We assigned it under the alias of roots by adding this property, angular will apply the path relative
to this roots.
It'll be able to extract the current route from this instance.
Let's empty out the array in the first argument of the navigate function.
We're not interested in redirecting the user to a different page, instead, we want to apply some query
parameters.
We can add a query parameter by adding the query params property to the configuration object.
This property will be an object of query parameter if you'd like to set query parameters, use a key
value system, the properties name will be the key for the query and the property's value will be the
queries value.
The router will take care of converting this from an object to a stream after conversion.
The string will be appended to the URL.
Let's try testing our app in the browser.
We can toggle the value in the drop down.
The result is the same query parameters are added to the path.
There's one more option I want to explore.
Query parameters can be added to the Router Link Directive.
We may want to configure the query parameter from the beginning.
Back in the editor, open the navigation template file.
Search for the link to the Manage page.
We are going to bind a property called query params.
The query params property is a part of the router linked directive, we can add query parameters through
this property.
The value for this property must be an object like before we will add the sort parameter with the value
of one.
The router linked DirecTV will convert the object to a string and appending the query to the URL.
Let's refresh the page in the browser.
We can navigate to different pages to check if the query parameter gets added, as you can see whenever
we're on a page other than the Manage page, the query parameter goes away.
The moment we click on the Manage link, the query appears.
It's the exact behavior we were looking for.
Angular gives us a lot of flexibility and freedom for working with paths.
We previously learned about path parameters for storing values in the URL.
It was helpful to use path parameters because we were able to create a dynamic route for various clips.
We could have used path parameters to implement this solution, but it's not exactly ideal.
Let me explain further.
We have two options for storing dynamic values in our URLs.
The first is by using query parameters.
I'm showing a very simplified example of what a clip URL would look like.
We're going to use the ID to generate a unique URL.
Storing the value in a query parameter is one way to go about it.
And the second example I'm using a path parameter rather than storing the ID in a query parameter.
We could store the ID in a path segment that's completely possible because the angular router supports
dynamic paths.
It's a common feature in most routers.
In addition, it looks cleaner compared to query parameters.
The question is why is using path parameters a more viable option than query parameters?
Technically, either solution works angular won't throw an error.
Search engines won't have a problem with indexing our site if we use query parameters.
It's not so much about errors, but what is considered good practice.
The general rule of thumb is this path parameters are used to retrieve a single or multiple resources
query.
Parameters are used to filter or sort through data and resources for sorting clips.
Using query parameters made sense because we were sorting the clips on the page for a single clip.
Using a path parameter would make sense because we're retrieving a single resource by following this
practice.
You can achieve a more organized route structure.
It's a pattern you'll see in most applications.
Not every company uses this pattern for one reason or another.
Older apps may have adopted a different pattern because the pattern I mentioned is still relatively
new.
Determining which to use will come with experience.
We'll leave it here.
We'll continue our work in the next lecture.