1 00:00:00,090 --> 00:00:05,790 In this lecture, we are going to render the same list of clips for an individual clip, we can reuse 2 00:00:05,790 --> 00:00:07,770 our component on the clip page. 3 00:00:07,980 --> 00:00:10,620 However, we're going to make one adjustments. 4 00:00:10,920 --> 00:00:14,460 I don't want to enable infinite scrolling for a single clip. 5 00:00:14,820 --> 00:00:17,220 This behavior should be left on the home page. 6 00:00:17,760 --> 00:00:22,410 Additionally, we should reset the list if the user moves to a different page. 7 00:00:22,680 --> 00:00:27,570 If a user scrolls on a page and clicks on a clip, they'll be presented with the same list. 8 00:00:27,840 --> 00:00:30,240 We should reset the list on new pages. 9 00:00:30,390 --> 00:00:31,410 Let's get started. 10 00:00:31,650 --> 00:00:34,650 Open the clips list component class file. 11 00:00:37,190 --> 00:00:42,950 We are going to add an input to the component, this input should have the ability to disable infinite 12 00:00:42,950 --> 00:00:49,280 scrolling at the top of the file import, the input class from the angular slash core package. 13 00:00:51,690 --> 00:00:56,520 Next to find a property called scrollable with an initial value of true. 14 00:00:59,080 --> 00:01:01,450 Decorate it with the input decorator. 15 00:01:03,930 --> 00:01:10,170 The default behavior of the component should be to enable infinite scrolling parent component should 16 00:01:10,170 --> 00:01:12,060 manually disable this behavior. 17 00:01:12,360 --> 00:01:18,720 Let's wrap our event listeners with conditional statements inside the nji on init function. 18 00:01:18,930 --> 00:01:22,980 Wrap the add event listener function with a conditional statement. 19 00:01:25,480 --> 00:01:29,350 The condition will be the this not scrollable property. 20 00:01:31,900 --> 00:01:35,290 If this property is true, will enable infinite scrolling. 21 00:01:35,560 --> 00:01:39,430 The same condition will be applied to the energy and destroy function. 22 00:01:42,050 --> 00:01:47,690 We're finished with disabling infinite scrolling before we add this component to our clip components. 23 00:01:47,900 --> 00:01:51,650 We should reset the clips after the second conditional lock. 24 00:01:51,800 --> 00:01:57,140 We can update the Clips Service Scott Page Clips Array to an empty array. 25 00:01:59,780 --> 00:02:02,180 All pages should start with a fresh array. 26 00:02:02,510 --> 00:02:05,810 We don't want to persist the same data from page to page. 27 00:02:06,110 --> 00:02:11,330 The energy on destroy lifecycle function will be called whenever the component is destroyed. 28 00:02:11,690 --> 00:02:14,240 Even on this component doesn't render a page. 29 00:02:14,450 --> 00:02:17,150 It is a child component of a page component. 30 00:02:17,510 --> 00:02:20,060 Children components of a page are destroyed. 31 00:02:20,690 --> 00:02:27,260 After making these changes, we can start loading this component in the clip component openly clip template 32 00:02:27,260 --> 00:02:27,740 file. 33 00:02:30,270 --> 00:02:35,970 And this template, you can find the list of videos by searching for a comment that says Video List, 34 00:02:36,360 --> 00:02:41,940 we can safely remove this entire portion of the template with the app clips list component. 35 00:02:44,450 --> 00:02:48,260 Lastly, we combined these scrollable property to false. 36 00:02:50,710 --> 00:02:53,830 This finding should effectively disable infinite scrolling. 37 00:02:54,070 --> 00:02:56,350 Let's try testing our app in the browser. 38 00:02:56,620 --> 00:02:59,050 First, let's test the home page. 39 00:03:01,490 --> 00:03:07,970 On the home page, infinite scrolling still works, our component can render clips uploaded in the past. 40 00:03:08,270 --> 00:03:12,230 Let's click on one of the clips we are taking to the clip page. 41 00:03:12,500 --> 00:03:15,740 At the bottom of the page, we're rendering the same list. 42 00:03:16,010 --> 00:03:19,340 However, the list should be limited to six clips. 43 00:03:19,640 --> 00:03:23,120 Infinite scrolling should be disabled, too perfect. 44 00:03:23,330 --> 00:03:26,540 We can start shifting our focus to the video on the page. 45 00:03:26,810 --> 00:03:29,570 Let's begin playing the video in the next lecture.