1 00:00:00,090 --> 00:00:03,719 In this lecture, we are going to handle scroll events on the home page. 2 00:00:03,960 --> 00:00:08,400 The ultimate goal is to render more clips when the or scroll to the bottom of the page. 3 00:00:08,610 --> 00:00:13,620 Initially, we're going to perform a request for some clips regardless of a scroll event. 4 00:00:13,950 --> 00:00:18,270 Loading Additional clips will require the user to scroll to the bottom of the page. 5 00:00:18,780 --> 00:00:22,540 Infinite scrolling is a fantastic feature to implement for an app. 6 00:00:22,860 --> 00:00:27,390 If we were to render all clips, the home page could become extremely large. 7 00:00:27,660 --> 00:00:31,230 Browsers could potentially lag from the large influx of data. 8 00:00:31,470 --> 00:00:35,760 It's not scalable to perform a request for all documents from a collection. 9 00:00:36,300 --> 00:00:39,240 It would be wiser to request documents in pieces. 10 00:00:39,540 --> 00:00:43,500 We can use a technique called infinite scrolling to enable this behavior. 11 00:00:43,860 --> 00:00:50,070 Infinite scrolling works by requesting additional data if a user scrolls past a specific location on 12 00:00:50,070 --> 00:00:50,670 the page. 13 00:00:50,970 --> 00:00:54,600 As long as the user is scrolling, the list will continue to grow. 14 00:00:55,200 --> 00:00:59,190 There are a couple of things we need to think of when implementing infinite scrolling. 15 00:00:59,580 --> 00:01:03,990 Firstly, we need to decide when to perform a request for more clips. 16 00:01:04,260 --> 00:01:09,180 If a user scrolls past a location on the page, we'll want to begin requesting data. 17 00:01:09,480 --> 00:01:11,340 This is where things can get tricky. 18 00:01:11,730 --> 00:01:15,660 We need to keep track of the last set of records we requested. 19 00:01:15,930 --> 00:01:19,530 We don't want to return a list of clips that have already been requested. 20 00:01:19,920 --> 00:01:22,800 Secondly, we should avoid parallel requests. 21 00:01:23,040 --> 00:01:26,880 It can lead to inconsistent results and increase the load on the server. 22 00:01:27,090 --> 00:01:29,520 We'll address these issues when we come across them. 23 00:01:29,850 --> 00:01:33,630 The first step is to listen for a scroll event on the window. 24 00:01:34,080 --> 00:01:38,160 The event should initiate a request for additional data when the window is. 25 00:01:38,160 --> 00:01:41,310 Scroll to the bottom of the document and your editor. 26 00:01:41,340 --> 00:01:44,130 Open the Clips List Component Class file. 27 00:01:46,580 --> 00:01:52,310 We're going to listen for the scroll event from the component, after all, this component is responsible 28 00:01:52,310 --> 00:01:54,170 for rendering the list of clips. 29 00:01:54,470 --> 00:02:01,160 So it should handle listening to the event inside the nji on init function called the window dot and 30 00:02:01,160 --> 00:02:02,540 event listener function. 31 00:02:04,960 --> 00:02:08,350 The name of the event we want to listen to is called Scroll. 32 00:02:10,840 --> 00:02:14,710 The scroll event is emitted whenever the user scrolls on the page. 33 00:02:14,830 --> 00:02:17,800 We're listening for this event on the window object. 34 00:02:18,160 --> 00:02:21,670 Let's pass in a function called this dot handle scroll. 35 00:02:24,120 --> 00:02:26,970 We have the option of using an anonymous function. 36 00:02:27,150 --> 00:02:31,590 However, we should remove the event if the user navigates to another page. 37 00:02:31,830 --> 00:02:37,980 Otherwise, we'll experience memory leak issues first before we remove the event listener. 38 00:02:38,130 --> 00:02:41,970 Let's define this method in our component at the bottom of the class. 39 00:02:42,100 --> 00:02:44,820 Define an arrow function called handle scroll. 40 00:02:47,420 --> 00:02:51,830 This function will be responsible for checking the current scroll position of the page. 41 00:02:52,160 --> 00:02:54,320 It's being defined as an arrow function. 42 00:02:54,650 --> 00:02:56,270 This step is very important. 43 00:02:56,540 --> 00:03:01,730 We will not be able to access the components injected services through a regular function. 44 00:03:02,030 --> 00:03:04,130 We'll be writing the logic in a moment. 45 00:03:04,610 --> 00:03:06,380 Let's remove the event listener. 46 00:03:06,410 --> 00:03:12,260 If the user navigates away from the page, components are destroyed when the user navigates to a different 47 00:03:12,260 --> 00:03:12,740 page. 48 00:03:13,040 --> 00:03:20,360 We can use a lifecycle function to destroy the event at the top of the file import the on destroy interface 49 00:03:20,360 --> 00:03:22,700 from the angular core package. 50 00:03:25,090 --> 00:03:28,270 Next, implement this interface on the class. 51 00:03:30,660 --> 00:03:36,390 Lastly, we must define the energy and destroy function to satisfy the interface. 52 00:03:38,860 --> 00:03:45,010 The energy and destroy function is called before the component is destroyed or using this lifecycle 53 00:03:45,010 --> 00:03:51,550 function because we want to remove the event, listener in the function will call the Window Dot Remove 54 00:03:51,550 --> 00:03:52,990 event listener function. 55 00:03:55,470 --> 00:04:00,810 We'll pass in the same values we use in the energy on in its life cycle function. 56 00:04:03,340 --> 00:04:08,920 Removing the event listener is always an important step if you're working with the event system outside 57 00:04:08,920 --> 00:04:12,580 of Angular, we can move on to handling these scroll event. 58 00:04:12,910 --> 00:04:16,120 We're going to need some information about the user's browser. 59 00:04:18,279 --> 00:04:22,120 In this image, the purple box represents the entire page. 60 00:04:22,390 --> 00:04:26,080 The green box represents the viewable area in the browser. 61 00:04:26,350 --> 00:04:31,930 There are three properties we're going to need to check if the user is scroll to the bottom of the page. 62 00:04:32,500 --> 00:04:35,200 The first property is called offset height. 63 00:04:35,560 --> 00:04:40,130 This property contains the height of the entire page, for this example. 64 00:04:40,270 --> 00:04:43,990 Let's assume the height of the document is 2000 pixels. 65 00:04:44,500 --> 00:04:46,930 The second property is called inner height. 66 00:04:47,320 --> 00:04:51,370 This property contains the height of the viewable area in the browser. 67 00:04:51,730 --> 00:04:54,790 It's how much of the page the user is able to see. 68 00:04:55,180 --> 00:05:00,280 For this example, let's assume the height of the viewable area is 600 pixels. 69 00:05:00,760 --> 00:05:03,430 The last property is called scroll top. 70 00:05:03,820 --> 00:05:09,490 This property contains the distance from the top of the page to the top of the viewable area. 71 00:05:09,850 --> 00:05:14,020 In this example, it's clear the user is at the bottom of the page. 72 00:05:14,380 --> 00:05:18,790 This will mean the scroll top property should be 4300 pixels. 73 00:05:19,300 --> 00:05:20,390 Here's what we'll do. 74 00:05:20,660 --> 00:05:24,160 We'll add the inner height and scroll top properties together. 75 00:05:24,580 --> 00:05:31,060 If the sum is equal to the off site height, property value will send a request for more clips. 76 00:05:32,930 --> 00:05:35,540 We'll be working on the handle scroll function. 77 00:05:35,750 --> 00:05:40,220 We're going to structurally document dot documents element object. 78 00:05:42,690 --> 00:05:49,410 This object will contain two of the properties we need there to the scroll top and offset height properties. 79 00:05:51,850 --> 00:05:54,790 Next, will the structure the window object? 80 00:05:57,200 --> 00:05:59,570 We'll grab the inner height property from it. 81 00:06:01,990 --> 00:06:04,870 It's not necessary to structure the properties. 82 00:06:05,110 --> 00:06:06,910 I recommend it for readability. 83 00:06:07,210 --> 00:06:13,360 The next thing we'll do is check if the scroll top and inner height properties are equal to the offset 84 00:06:13,360 --> 00:06:17,470 height property will declare a variable called bottom of window. 85 00:06:17,740 --> 00:06:26,020 Its value will be the following math background scroll top plus inner height equals equals equals offset 86 00:06:26,020 --> 00:06:26,440 height. 87 00:06:28,990 --> 00:06:33,250 We're wrapping the scroll top property with the Mathop Round function. 88 00:06:33,520 --> 00:06:35,950 This property may have decimal values. 89 00:06:36,190 --> 00:06:41,320 We want to be dealing with whole numbers when making the comparison because the inner height property 90 00:06:41,320 --> 00:06:43,000 will always be a whole number. 91 00:06:43,510 --> 00:06:50,530 The value of this variable will be a Boolean value below the variables will create a conditional statement. 92 00:06:52,970 --> 00:06:56,800 We're going to check if the bottom of window variable is truly. 93 00:06:59,210 --> 00:07:02,000 If it is, we'll log a message in the console. 94 00:07:04,530 --> 00:07:10,200 This function we've written will be able to tell our component to request more data if the user scrolls 95 00:07:10,200 --> 00:07:11,880 to the very bottom of the page. 96 00:07:12,180 --> 00:07:17,040 If we did everything right, we should be able to see the message logged in the console. 97 00:07:17,370 --> 00:07:19,590 Let's do the home page in the browser. 98 00:07:22,120 --> 00:07:26,980 If I scroll to the bottom of the page, will find the message logged in the console. 99 00:07:27,280 --> 00:07:32,680 This message verifies we're able to detect when the user has scroll to the bottom of the page. 100 00:07:32,950 --> 00:07:35,020 We can proceed to make request. 101 00:07:35,290 --> 00:07:38,200 We'll take care of this step in the next lecture.