In this lecture, we are going to handle scroll events on the home page.
The ultimate goal is to render more clips when the or scroll to the bottom of the page.
Initially, we're going to perform a request for some clips regardless of a scroll event.
Loading Additional clips will require the user to scroll to the bottom of the page.
Infinite scrolling is a fantastic feature to implement for an app.
If we were to render all clips, the home page could become extremely large.
Browsers could potentially lag from the large influx of data.
It's not scalable to perform a request for all documents from a collection.
It would be wiser to request documents in pieces.
We can use a technique called infinite scrolling to enable this behavior.
Infinite scrolling works by requesting additional data if a user scrolls past a specific location on
the page.
As long as the user is scrolling, the list will continue to grow.
There are a couple of things we need to think of when implementing infinite scrolling.
Firstly, we need to decide when to perform a request for more clips.
If a user scrolls past a location on the page, we'll want to begin requesting data.
This is where things can get tricky.
We need to keep track of the last set of records we requested.
We don't want to return a list of clips that have already been requested.
Secondly, we should avoid parallel requests.
It can lead to inconsistent results and increase the load on the server.
We'll address these issues when we come across them.
The first step is to listen for a scroll event on the window.
The event should initiate a request for additional data when the window is.
Scroll to the bottom of the document and your editor.
Open the Clips List Component Class file.
We're going to listen for the scroll event from the component, after all, this component is responsible
for rendering the list of clips.
So it should handle listening to the event inside the nji on init function called the window dot and
event listener function.
The name of the event we want to listen to is called Scroll.
The scroll event is emitted whenever the user scrolls on the page.
We're listening for this event on the window object.
Let's pass in a function called this dot handle scroll.
We have the option of using an anonymous function.
However, we should remove the event if the user navigates to another page.
Otherwise, we'll experience memory leak issues first before we remove the event listener.
Let's define this method in our component at the bottom of the class.
Define an arrow function called handle scroll.
This function will be responsible for checking the current scroll position of the page.
It's being defined as an arrow function.
This step is very important.
We will not be able to access the components injected services through a regular function.
We'll be writing the logic in a moment.
Let's remove the event listener.
If the user navigates away from the page, components are destroyed when the user navigates to a different
page.
We can use a lifecycle function to destroy the event at the top of the file import the on destroy interface
from the angular core package.
Next, implement this interface on the class.
Lastly, we must define the energy and destroy function to satisfy the interface.
The energy and destroy function is called before the component is destroyed or using this lifecycle
function because we want to remove the event, listener in the function will call the Window Dot Remove
event listener function.
We'll pass in the same values we use in the energy on in its life cycle function.
Removing the event listener is always an important step if you're working with the event system outside
of Angular, we can move on to handling these scroll event.
We're going to need some information about the user's browser.
In this image, the purple box represents the entire page.
The green box represents the viewable area in the browser.
There are three properties we're going to need to check if the user is scroll to the bottom of the page.
The first property is called offset height.
This property contains the height of the entire page, for this example.
Let's assume the height of the document is 2000 pixels.
The second property is called inner height.
This property contains the height of the viewable area in the browser.
It's how much of the page the user is able to see.
For this example, let's assume the height of the viewable area is 600 pixels.
The last property is called scroll top.
This property contains the distance from the top of the page to the top of the viewable area.
In this example, it's clear the user is at the bottom of the page.
This will mean the scroll top property should be 4300 pixels.
Here's what we'll do.
We'll add the inner height and scroll top properties together.
If the sum is equal to the off site height, property value will send a request for more clips.
We'll be working on the handle scroll function.
We're going to structurally document dot documents element object.
This object will contain two of the properties we need there to the scroll top and offset height properties.
Next, will the structure the window object?
We'll grab the inner height property from it.
It's not necessary to structure the properties.
I recommend it for readability.
The next thing we'll do is check if the scroll top and inner height properties are equal to the offset
height property will declare a variable called bottom of window.
Its value will be the following math background scroll top plus inner height equals equals equals offset
height.
We're wrapping the scroll top property with the Mathop Round function.
This property may have decimal values.
We want to be dealing with whole numbers when making the comparison because the inner height property
will always be a whole number.
The value of this variable will be a Boolean value below the variables will create a conditional statement.
We're going to check if the bottom of window variable is truly.
If it is, we'll log a message in the console.
This function we've written will be able to tell our component to request more data if the user scrolls
to the very bottom of the page.
If we did everything right, we should be able to see the message logged in the console.
Let's do the home page in the browser.
If I scroll to the bottom of the page, will find the message logged in the console.
This message verifies we're able to detect when the user has scroll to the bottom of the page.
We can proceed to make request.
We'll take care of this step in the next lecture.