In this lecture, we are going to render the same list of clips for an individual clip, we can reuse
our component on the clip page.
However, we're going to make one adjustments.
I don't want to enable infinite scrolling for a single clip.
This behavior should be left on the home page.
Additionally, we should reset the list if the user moves to a different page.
If a user scrolls on a page and clicks on a clip, they'll be presented with the same list.
We should reset the list on new pages.
Let's get started.
Open the clips list component class file.
We are going to add an input to the component, this input should have the ability to disable infinite
scrolling at the top of the file import, the input class from the angular slash core package.
Next to find a property called scrollable with an initial value of true.
Decorate it with the input decorator.
The default behavior of the component should be to enable infinite scrolling parent component should
manually disable this behavior.
Let's wrap our event listeners with conditional statements inside the nji on init function.
Wrap the add event listener function with a conditional statement.
The condition will be the this not scrollable property.
If this property is true, will enable infinite scrolling.
The same condition will be applied to the energy and destroy function.
We're finished with disabling infinite scrolling before we add this component to our clip components.
We should reset the clips after the second conditional lock.
We can update the Clips Service Scott Page Clips Array to an empty array.
All pages should start with a fresh array.
We don't want to persist the same data from page to page.
The energy on destroy lifecycle function will be called whenever the component is destroyed.
Even on this component doesn't render a page.
It is a child component of a page component.
Children components of a page are destroyed.
After making these changes, we can start loading this component in the clip component openly clip template
file.
And this template, you can find the list of videos by searching for a comment that says Video List,
we can safely remove this entire portion of the template with the app clips list component.
Lastly, we combined these scrollable property to false.
This finding should effectively disable infinite scrolling.
Let's try testing our app in the browser.
First, let's test the home page.
On the home page, infinite scrolling still works, our component can render clips uploaded in the past.
Let's click on one of the clips we are taking to the clip page.
At the bottom of the page, we're rendering the same list.
However, the list should be limited to six clips.
Infinite scrolling should be disabled, too perfect.
We can start shifting our focus to the video on the page.
Let's begin playing the video in the next lecture.