1
00:00:00,080 --> 00:00:05,930
In this lecture, we're going to use query parameters to store the sorting order of videos on the manage

2
00:00:05,930 --> 00:00:06,720
page.

3
00:00:06,740 --> 00:00:12,890
Query parameters are extremely powerful because they allow us to stay on a resource without updating

4
00:00:12,890 --> 00:00:14,240
the entire page.

5
00:00:14,240 --> 00:00:19,700
We can add query parameters to our roots to filter and sort through data on a page.

6
00:00:19,700 --> 00:00:21,860
But what is a query parameter?

7
00:00:21,860 --> 00:00:24,800
We've talked about the structure of a URL.

8
00:00:24,890 --> 00:00:28,120
A URL consists of a domain and path.

9
00:00:28,130 --> 00:00:33,290
There's one additional piece of the URL that is completely optional called the query string.

10
00:00:33,290 --> 00:00:37,040
We can attach data to the URL through a query string.

11
00:00:37,070 --> 00:00:39,380
The server will accept this data.

12
00:00:39,410 --> 00:00:43,730
Developers will use query strings to filter and sort through data.

13
00:00:43,760 --> 00:00:49,640
The format for a query is simple Query strings always begin with a question mark symbol.

14
00:00:49,670 --> 00:00:54,650
The question mark symbol denotes that anything after it is a query parameter.

15
00:00:54,680 --> 00:00:57,710
Query parameters are key value pairs.

16
00:00:57,710 --> 00:01:03,960
If you would like to add additional query parameters, they can be separated with an ampersand character.

17
00:01:03,960 --> 00:01:07,410
In this example, there are two query parameters.

18
00:01:07,410 --> 00:01:13,830
The first parameter is called foo with a value of bar, and the second parameter is called order.

19
00:01:13,830 --> 00:01:15,480
With a value of one.

20
00:01:15,510 --> 00:01:21,120
We're going to use a query parameter to store the order of videos on the manage page.

21
00:01:21,120 --> 00:01:24,990
Angular's Routing Library Supports Query parameters.

22
00:01:26,150 --> 00:01:31,380
Query parameters are used by major companies like YouTube, Facebook and Twitter.

23
00:01:31,400 --> 00:01:37,460
For example, if you perform a search on YouTube, you'll be able to refresh the page without performing

24
00:01:37,460 --> 00:01:38,360
the search again.

25
00:01:38,390 --> 00:01:40,430
The same results will get rendered.

26
00:01:40,460 --> 00:01:44,960
YouTube uses query parameters to store the search parameters.

27
00:01:44,990 --> 00:01:49,400
We can do something similar for our videos on the manage page.

28
00:01:49,400 --> 00:01:52,040
We have a dropdown for sorting videos.

29
00:01:52,040 --> 00:01:55,560
Users can view their latest or oldest uploads.

30
00:01:55,580 --> 00:01:58,430
In some cases we may want to persist.

31
00:01:58,430 --> 00:02:00,970
The ordering across page refreshes.

32
00:02:00,980 --> 00:02:04,860
For example, I want to view my oldest uploads first.

33
00:02:04,880 --> 00:02:08,810
If I were to refresh the page, the sorting order would be gone.

34
00:02:08,840 --> 00:02:12,320
The videos are sorted from latest to oldest.

35
00:02:12,350 --> 00:02:17,430
We can persist the order by storing the sorting value in a query parameter.

36
00:02:17,450 --> 00:02:18,870
Let's give it a try.

37
00:02:18,890 --> 00:02:22,370
In your editor, open the manage template file.

38
00:02:24,450 --> 00:02:28,290
We will start by listening for changes on the select element.

39
00:02:28,320 --> 00:02:34,050
We don't want to add a query parameter until this input element has changed its value.

40
00:02:34,080 --> 00:02:40,080
You can find the dropdown under a comment that says sort videos on the select element.

41
00:02:40,110 --> 00:02:42,450
We will bind the change event.

42
00:02:44,460 --> 00:02:50,520
If this gets emitted, we will run a function called sort with the event object passed in.

43
00:02:52,860 --> 00:02:56,670
The event object will give us the value selected by the user.

44
00:02:56,700 --> 00:03:00,630
The next step is to define this method for handling the event.

45
00:03:00,660 --> 00:03:03,900
Let's open the manage component class file.

46
00:03:05,990 --> 00:03:11,870
Inside this class, we will add the sort method with the event object as an argument.

47
00:03:13,960 --> 00:03:17,890
The event argument will be annotated with the event type.

48
00:03:19,840 --> 00:03:26,890
Inside this function, we are going to destructure the value property from the Event.target property.

49
00:03:28,970 --> 00:03:32,150
We are grabbing the value before updating the route.

50
00:03:32,150 --> 00:03:34,820
An error will pop up from TypeScript.

51
00:03:34,850 --> 00:03:40,100
It can't guarantee the value property will be available on the target object.

52
00:03:40,130 --> 00:03:42,410
We've encountered this error before.

53
00:03:42,440 --> 00:03:48,740
This error can be fixed by explicitly setting the type of the object as an element which does have the

54
00:03:48,740 --> 00:03:49,910
value property.

55
00:03:49,940 --> 00:03:52,520
Surround the value with parentheses.

56
00:03:54,460 --> 00:03:59,290
Next, add the following as HTML select element.

57
00:04:01,400 --> 00:04:05,660
The HTML select element type is defined by TypeScript.

58
00:04:05,690 --> 00:04:08,600
We can move on to adding the query parameter.

59
00:04:08,630 --> 00:04:11,290
There are a couple of options at our disposal.

60
00:04:11,300 --> 00:04:13,880
We will look at one option in this lecture.

61
00:04:13,880 --> 00:04:17,519
In the next one, we will explore alternative options.

62
00:04:17,540 --> 00:04:22,400
Either way, we're going to need the router service at the top of the file.

63
00:04:22,400 --> 00:04:27,020
Import the router service from the angular slash router package.

64
00:04:29,800 --> 00:04:36,820
Back in the sort function, we will call the this dot router dot navigate by URL function.

65
00:04:38,630 --> 00:04:41,720
We will pass in a template string as an argument.

66
00:04:41,750 --> 00:04:47,690
The value will be the following slash manage question mark sort equals value.

67
00:04:49,670 --> 00:04:52,880
We have freedom over the names of our query parameters.

68
00:04:52,880 --> 00:05:00,020
But generally, if you're creating an API, the query parameters should have readable and concise names.

69
00:05:00,050 --> 00:05:04,340
This is why you will find more descriptive names in rest APIs.

70
00:05:04,370 --> 00:05:09,400
If you're using them internally, you may see names shortened to a single letter.

71
00:05:09,410 --> 00:05:15,320
For example, YouTube uses the letter V to name its query parameter for a video ID.

72
00:05:15,680 --> 00:05:20,720
Not very descriptive, but YouTube doesn't expect people to modify the value.

73
00:05:20,750 --> 00:05:22,930
It's something that's handled by them.

74
00:05:22,940 --> 00:05:29,750
Before we test the sorting mechanism, we should store the query parameter similar to our roots data.

75
00:05:29,780 --> 00:05:33,880
The router will expose an observable for the roots parameters.

76
00:05:33,890 --> 00:05:37,740
We can subscribe to this observable for changes on the root.

77
00:05:37,760 --> 00:05:43,120
First, we're going to need the activated root service at the top of the file.

78
00:05:43,130 --> 00:05:48,260
Import the activated root service from the angular root package.

79
00:05:50,250 --> 00:05:53,790
Next we will inject this service into our class.

80
00:05:53,790 --> 00:05:58,680
Through the constructor function, we will reference the service as root.

81
00:06:00,700 --> 00:06:05,340
Lastly, we can subscribe to changes from the routes parameters.

82
00:06:05,350 --> 00:06:12,340
We should listen to these changes when the component is initialized inside the NG on init function,

83
00:06:12,340 --> 00:06:17,200
we will subscribe to the this dot route dot query params observable.

84
00:06:19,290 --> 00:06:24,420
We should create a property for storing these sorting order at the top of the class.

85
00:06:24,450 --> 00:06:28,980
Create a property called video order with an initial value of one.

86
00:06:30,950 --> 00:06:38,300
We are storing the value as a string by default, HTML elements will typecast an inputs value.

87
00:06:38,300 --> 00:06:42,110
As a string, one will represent a descending order.

88
00:06:42,110 --> 00:06:44,960
Two will represent an ascending order.

89
00:06:44,990 --> 00:06:47,120
We're going to display new uploads.

90
00:06:47,120 --> 00:06:51,070
First, back in the subscription, we will pass in a function.

91
00:06:51,080 --> 00:06:55,400
This function will be supplied with an object of query parameters.

92
00:06:57,420 --> 00:06:58,860
For type checking.

93
00:06:58,860 --> 00:07:02,340
You can annotate this argument with the params type.

94
00:07:02,370 --> 00:07:06,570
This step is optional, but you may want to do this for type safety.

95
00:07:06,600 --> 00:07:12,390
Be sure to import the params object from the angular slash router package.

96
00:07:14,470 --> 00:07:17,920
We've applied this same type to a route's parameters.

97
00:07:17,950 --> 00:07:23,290
This type can be applied to route parameters and query parameters internally.

98
00:07:23,320 --> 00:07:26,740
Angular uses this type for both situations.

99
00:07:26,770 --> 00:07:32,650
The value pushed by the observable will contain the latest values from the query parameter.

100
00:07:32,680 --> 00:07:39,280
We can access them by their key name Inside our subscription, we will set the video order property

101
00:07:39,280 --> 00:07:41,980
to the params dot sort property.

102
00:07:44,270 --> 00:07:48,560
It's possible the params dot sort property may be empty.

103
00:07:48,590 --> 00:07:56,300
Keep in mind this observable will push values whenever the query parameters change in the URL, a different

104
00:07:56,300 --> 00:08:02,450
query parameter can change in our URL, which can cause the observable to push a new value.

105
00:08:02,480 --> 00:08:05,930
Let's add a ternary operator to check the value.

106
00:08:05,960 --> 00:08:08,990
We will check if the property is equal to two.

107
00:08:09,020 --> 00:08:12,050
If it is, we will continue with the assignment.

108
00:08:12,080 --> 00:08:15,080
Otherwise we will set the value to one.

109
00:08:17,400 --> 00:08:20,780
Typically we would unsubscribe from the observable.

110
00:08:20,790 --> 00:08:23,760
However, Angular will complete the observable.

111
00:08:23,760 --> 00:08:28,050
When the component is destroyed, the router destroys the component.

112
00:08:28,050 --> 00:08:34,549
When the user navigates to a different page, we can skip the step of unsubscribing from the observable.

113
00:08:34,559 --> 00:08:36,990
Let's test our app in the browser.

114
00:08:38,400 --> 00:08:41,640
On the dropdown, we can toggle between sorting.

115
00:08:41,640 --> 00:08:44,670
As we do, the URL gets updated.

116
00:08:44,700 --> 00:08:48,760
The query parameter is properly being added to the URL.

117
00:08:48,780 --> 00:08:54,930
We can verify if the component's properties are updated by using the angular developer tools.

118
00:08:57,240 --> 00:09:03,500
Under the manage components, the video sort property is being set to the value from the dropdown.

119
00:09:03,510 --> 00:09:04,410
Perfect.

120
00:09:04,410 --> 00:09:09,630
With the help of the router, we were able to apply a query parameter easily.

121
00:09:09,630 --> 00:09:12,120
The router was smart enough to understand.

122
00:09:12,120 --> 00:09:14,750
We wanted to update the query parameter.

123
00:09:14,760 --> 00:09:17,100
It didn't reload the component.

124
00:09:17,130 --> 00:09:20,310
We've successfully stored the query parameters.

125
00:09:20,310 --> 00:09:26,760
In the next lecture we are going to look at alternative solutions to adding query parameters to our

126
00:09:26,760 --> 00:09:27,900
URLs.