In this lecture, we are going to inject our service into the clips list component will be able to invoke
the Get Clips function.
After doing so, we have the option of injecting the clips service into the home component, but I don't
think the home component should have to worry about managing the clips.
Initiating query should be isolated to the clips list component and clips service.
This way, we can reuse the component on other pages in your editor.
Open the clips list component class file.
At the top of the file, import, the clips service.
Next, inject this service into the component.
We are injecting this service for the Get Clips method, our component won't be able to loop through
Firebase data until we've invoked this method.
We're going to call this function in two locations.
The first location will be inside the constructor function.
We are going to initiate a request when the component gets loaded, the second location is in the handle
scroll function.
Let's call this function inside the conditional block.
A new request should be initiated whenever the user scrolls to the bottom of the page after making these
changes, we can move on to updating the template.
The last step is to loop through the clips in the template, open the clips list template file.
Inside this template, you're going to find a group of six anchor elements for a better overview of
the template.
I'm going to minimize these tags.
They're a dummy lists of clips we can safely remove the last five anchor tags.
We're going to keep the first tag as a template for the loop on this element.
Add the energy for DirecTV.
The expression will be the following.
Let clips of clips, service, dot page clips.
An array of clips is stored in the service.
We're looping through this array to begin rendering the list of clips.
The alias for an individual clip is clip.
Let's begin replacing these static parts of the template with our object's properties.
We can begin with the image behind the source attribute to the clip screen shot.
You are our property.
Next, scroll down to the header.
You can find it by searching for a comment that says heading inside the aides to tags output the following
expression clip dot title.
Moving along the next sections are the name of the uploader and date.
Let's replace the static name with the following expression.
Clip dot display name.
As for the date, we can replace the static text with the following expression clicked timestamp.
There's one last piece of information surrounding each clip is a link we're applying the energy for
directive on the anchor element.
If the user clicks on the link, we should redirect them to a clip.
We can generate a link with the Router Link directive.
Replace the RF attribute with a binding on the router or link directv.
Will buying the directive to an array with three items, arrays can be used to build links.
Each item in the array will represent a segment in the path.
Roots to a clip can be built with the word clip, followed by the ID of the clip.
Let's pass in the clip, documented property for the second item in the array.
At the first index, we are going to add a forward slash character for absolute routing.
The default behavior of this directive is to apply relative routing if we're going to use this component
in other components.
We should enable absolute routing to prevent quantum behavior.
I think that's about it.
Let's try testing our app, open the home page in the browser.
The list of clips is rendered on the page.
We can scroll to the bottom to retrieve additional clips.
You shouldn't receive duplicate clips.
Everything should be unique, which is awesome.
What's not awesome are the images.
They're not loading on the page.
Let's talk about it in the next lecture.