1
00:00:00,180 --> 00:00:06,720
In this lecture, we're going to create a component for rendering a list of clips to kick things off.

2
00:00:06,810 --> 00:00:11,760
We're going to focus on the home page, as we discussed in the previous lecture.

3
00:00:11,970 --> 00:00:15,570
This page will need to render an infinite amount of clips.

4
00:00:15,930 --> 00:00:19,920
Our component should handle listening to scroll events on the page.

5
00:00:20,220 --> 00:00:27,930
If the user scrolls will initiate a request for rendering more clips before we dig into requests, let's

6
00:00:27,930 --> 00:00:33,570
move the list from the home component to a new component in the command line.

7
00:00:33,720 --> 00:00:39,000
Run the following command Nji G Component Clips list.

8
00:00:41,530 --> 00:00:45,040
We are registering this component under the app module.

9
00:00:45,310 --> 00:00:51,430
The next step is to transfer the template from the home component to the clips list component.

10
00:00:51,820 --> 00:00:53,860
Open the home template file.

11
00:00:56,450 --> 00:01:00,800
Search for that template by looking for a comment that says Cliff's list.

12
00:01:03,330 --> 00:01:06,600
We're going to cut the entire div tag from the templates.

13
00:01:09,070 --> 00:01:12,610
Next, open the clips list template file.

14
00:01:15,020 --> 00:01:18,230
Let's replace the current template with the new template.

15
00:01:20,760 --> 00:01:25,440
Lastly, we can try loading our component inside the home component.

16
00:01:25,770 --> 00:01:30,210
We're going to add it in the same location, we grabbed the components template.

17
00:01:32,820 --> 00:01:35,610
Let's try viewing the home page in the browser.

18
00:01:38,090 --> 00:01:40,490
The component gets rendered without a problem.

19
00:01:40,700 --> 00:01:43,760
We can move on to grabbing videos from our database.

20
00:01:43,970 --> 00:01:47,000
Let's begin this process in the next lecture.