1 00:00:00,090 --> 00:00:06,480 In this lecture, we are going to inject our service into the clips list component will be able to invoke 2 00:00:06,480 --> 00:00:07,890 the Get Clips function. 3 00:00:07,890 --> 00:00:14,400 After doing so, we have the option of injecting the clips service into the home component, but I don't 4 00:00:14,400 --> 00:00:18,090 think the home component should have to worry about managing the clips. 5 00:00:18,750 --> 00:00:24,060 Initiating query should be isolated to the clips list component and clips service. 6 00:00:24,420 --> 00:00:29,160 This way, we can reuse the component on other pages in your editor. 7 00:00:29,370 --> 00:00:32,369 Open the clips list component class file. 8 00:00:34,910 --> 00:00:38,210 At the top of the file, import, the clips service. 9 00:00:40,570 --> 00:00:43,630 Next, inject this service into the component. 10 00:00:46,310 --> 00:00:52,220 We are injecting this service for the Get Clips method, our component won't be able to loop through 11 00:00:52,220 --> 00:00:55,430 Firebase data until we've invoked this method. 12 00:00:55,880 --> 00:00:58,760 We're going to call this function in two locations. 13 00:00:59,060 --> 00:01:02,540 The first location will be inside the constructor function. 14 00:01:05,180 --> 00:01:11,570 We are going to initiate a request when the component gets loaded, the second location is in the handle 15 00:01:11,570 --> 00:01:12,560 scroll function. 16 00:01:12,860 --> 00:01:15,980 Let's call this function inside the conditional block. 17 00:01:18,550 --> 00:01:24,910 A new request should be initiated whenever the user scrolls to the bottom of the page after making these 18 00:01:24,910 --> 00:01:28,210 changes, we can move on to updating the template. 19 00:01:28,570 --> 00:01:35,680 The last step is to loop through the clips in the template, open the clips list template file. 20 00:01:38,250 --> 00:01:44,670 Inside this template, you're going to find a group of six anchor elements for a better overview of 21 00:01:44,670 --> 00:01:45,360 the template. 22 00:01:45,510 --> 00:01:47,580 I'm going to minimize these tags. 23 00:01:50,150 --> 00:01:55,580 They're a dummy lists of clips we can safely remove the last five anchor tags. 24 00:01:58,190 --> 00:02:02,860 We're going to keep the first tag as a template for the loop on this element. 25 00:02:02,930 --> 00:02:05,390 Add the energy for DirecTV. 26 00:02:07,860 --> 00:02:09,600 The expression will be the following. 27 00:02:09,810 --> 00:02:14,370 Let clips of clips, service, dot page clips. 28 00:02:16,980 --> 00:02:19,470 An array of clips is stored in the service. 29 00:02:19,800 --> 00:02:23,670 We're looping through this array to begin rendering the list of clips. 30 00:02:24,060 --> 00:02:27,030 The alias for an individual clip is clip. 31 00:02:27,480 --> 00:02:32,130 Let's begin replacing these static parts of the template with our object's properties. 32 00:02:32,460 --> 00:02:38,360 We can begin with the image behind the source attribute to the clip screen shot. 33 00:02:38,370 --> 00:02:39,570 You are our property. 34 00:02:42,170 --> 00:02:44,360 Next, scroll down to the header. 35 00:02:44,720 --> 00:02:51,920 You can find it by searching for a comment that says heading inside the aides to tags output the following 36 00:02:51,920 --> 00:02:54,140 expression clip dot title. 37 00:02:56,730 --> 00:03:01,290 Moving along the next sections are the name of the uploader and date. 38 00:03:01,740 --> 00:03:04,950 Let's replace the static name with the following expression. 39 00:03:05,250 --> 00:03:06,920 Clip dot display name. 40 00:03:09,370 --> 00:03:15,700 As for the date, we can replace the static text with the following expression clicked timestamp. 41 00:03:18,250 --> 00:03:24,820 There's one last piece of information surrounding each clip is a link we're applying the energy for 42 00:03:24,820 --> 00:03:26,770 directive on the anchor element. 43 00:03:27,100 --> 00:03:30,880 If the user clicks on the link, we should redirect them to a clip. 44 00:03:31,510 --> 00:03:34,690 We can generate a link with the Router Link directive. 45 00:03:34,990 --> 00:03:39,490 Replace the RF attribute with a binding on the router or link directv. 46 00:03:42,020 --> 00:03:47,450 Will buying the directive to an array with three items, arrays can be used to build links. 47 00:03:47,810 --> 00:03:51,530 Each item in the array will represent a segment in the path. 48 00:03:51,800 --> 00:03:56,810 Roots to a clip can be built with the word clip, followed by the ID of the clip. 49 00:03:57,230 --> 00:04:02,480 Let's pass in the clip, documented property for the second item in the array. 50 00:04:05,180 --> 00:04:10,460 At the first index, we are going to add a forward slash character for absolute routing. 51 00:04:10,850 --> 00:04:17,209 The default behavior of this directive is to apply relative routing if we're going to use this component 52 00:04:17,209 --> 00:04:18,410 in other components. 53 00:04:18,649 --> 00:04:22,040 We should enable absolute routing to prevent quantum behavior. 54 00:04:22,670 --> 00:04:23,960 I think that's about it. 55 00:04:24,200 --> 00:04:28,550 Let's try testing our app, open the home page in the browser. 56 00:04:31,170 --> 00:04:33,510 The list of clips is rendered on the page. 57 00:04:33,750 --> 00:04:37,140 We can scroll to the bottom to retrieve additional clips. 58 00:04:37,410 --> 00:04:39,750 You shouldn't receive duplicate clips. 59 00:04:40,260 --> 00:04:42,660 Everything should be unique, which is awesome. 60 00:04:43,110 --> 00:04:45,390 What's not awesome are the images. 61 00:04:45,660 --> 00:04:47,430 They're not loading on the page. 62 00:04:47,670 --> 00:04:49,950 Let's talk about it in the next lecture.