In this lecture, we're going to use query parameters to store the sorting order of videos on the manage
page.
Query parameters are extremely powerful because they allow us to stay on a resource without updating
the entire page.
We can add query parameters to our roots to filter and sort through data on a page.
But what is a query parameter?
We've talked about the structure of a URL.
A URL consists of a domain and path.
There's one additional piece of the URL that is completely optional called the query string.
We can attach data to the URL through a query string.
The server will accept this data.
Developers will use query strings to filter and sort through data.
The format for a query is simple Query strings always begin with a question mark symbol.
The question mark symbol denotes that anything after it is a query parameter.
Query parameters are key value pairs.
If you would like to add additional query parameters, they can be separated with an ampersand character.
In this example, there are two query parameters.
The first parameter is called foo with a value of bar, and the second parameter is called order.
With a value of one.
We're going to use a query parameter to store the order of videos on the manage page.
Angular's Routing Library Supports Query parameters.
Query parameters are used by major companies like YouTube, Facebook and Twitter.
For example, if you perform a search on YouTube, you'll be able to refresh the page without performing
the search again.
The same results will get rendered.
YouTube uses query parameters to store the search parameters.
We can do something similar for our videos on the manage page.
We have a dropdown for sorting videos.
Users can view their latest or oldest uploads.
In some cases we may want to persist.
The ordering across page refreshes.
For example, I want to view my oldest uploads first.
If I were to refresh the page, the sorting order would be gone.
The videos are sorted from latest to oldest.
We can persist the order by storing the sorting value in a query parameter.
Let's give it a try.
In your editor, open the manage template file.
We will start by listening for changes on the select element.
We don't want to add a query parameter until this input element has changed its value.
You can find the dropdown under a comment that says sort videos on the select element.
We will bind the change event.
If this gets emitted, we will run a function called sort with the event object passed in.
The event object will give us the value selected by the user.
The next step is to define this method for handling the event.
Let's open the manage component class file.
Inside this class, we will add the sort method with the event object as an argument.
The event argument will be annotated with the event type.
Inside this function, we are going to destructure the value property from the Event.target property.
We are grabbing the value before updating the route.
An error will pop up from TypeScript.
It can't guarantee the value property will be available on the target object.
We've encountered this error before.
This error can be fixed by explicitly setting the type of the object as an element which does have the
value property.
Surround the value with parentheses.
Next, add the following as HTML select element.
The HTML select element type is defined by TypeScript.
We can move on to adding the query parameter.
There are a couple of options at our disposal.
We will look at one option in this lecture.
In the next one, we will explore alternative options.
Either way, we're going to need the router service at the top of the file.
Import the router service from the angular slash router package.
Back in the sort function, we will call the this dot router dot navigate by URL function.
We will pass in a template string as an argument.
The value will be the following slash manage question mark sort equals value.
We have freedom over the names of our query parameters.
But generally, if you're creating an API, the query parameters should have readable and concise names.
This is why you will find more descriptive names in rest APIs.
If you're using them internally, you may see names shortened to a single letter.
For example, YouTube uses the letter V to name its query parameter for a video ID.
Not very descriptive, but YouTube doesn't expect people to modify the value.
It's something that's handled by them.
Before we test the sorting mechanism, we should store the query parameter similar to our roots data.
The router will expose an observable for the roots parameters.
We can subscribe to this observable for changes on the root.
First, we're going to need the activated root service at the top of the file.
Import the activated root service from the angular root package.
Next we will inject this service into our class.
Through the constructor function, we will reference the service as root.
Lastly, we can subscribe to changes from the routes parameters.
We should listen to these changes when the component is initialized inside the NG on init function,
we will subscribe to the this dot route dot query params observable.
We should create a property for storing these sorting order at the top of the class.
Create a property called video order with an initial value of one.
We are storing the value as a string by default, HTML elements will typecast an inputs value.
As a string, one will represent a descending order.
Two will represent an ascending order.
We're going to display new uploads.
First, back in the subscription, we will pass in a function.
This function will be supplied with an object of query parameters.
For type checking.
You can annotate this argument with the params type.
This step is optional, but you may want to do this for type safety.
Be sure to import the params object from the angular slash router package.
We've applied this same type to a route's parameters.
This type can be applied to route parameters and query parameters internally.
Angular uses this type for both situations.
The value pushed by the observable will contain the latest values from the query parameter.
We can access them by their key name Inside our subscription, we will set the video order property
to the params dot sort property.
It's possible the params dot sort property may be empty.
Keep in mind this observable will push values whenever the query parameters change in the URL, a different
query parameter can change in our URL, which can cause the observable to push a new value.
Let's add a ternary operator to check the value.
We will check if the property is equal to two.
If it is, we will continue with the assignment.
Otherwise we will set the value to one.
Typically we would unsubscribe from the observable.
However, Angular will complete the observable.
When the component is destroyed, the router destroys the component.
When the user navigates to a different page, we can skip the step of unsubscribing from the observable.
Let's test our app in the browser.
On the dropdown, we can toggle between sorting.
As we do, the URL gets updated.
The query parameter is properly being added to the URL.
We can verify if the component's properties are updated by using the angular developer tools.
Under the manage components, the video sort property is being set to the value from the dropdown.
Perfect.
With the help of the router, we were able to apply a query parameter easily.
The router was smart enough to understand.
We wanted to update the query parameter.
It didn't reload the component.
We've successfully stored the query parameters.
In the next lecture we are going to look at alternative solutions to adding query parameters to our
URLs.