In this lecture, we are going to begin sending a request to Firebase, we're able to render a player
on the page.
However, the same video will always be played.
We need to dynamically render a different video based on the URL in the URL.
We're storing the ID as a root parameter.
This ID is going to help us query the database for the clip the user wants to watch.
There are different ways we can retrieve data from our database.
For this page, we're going to use a feature called Resolvers.
This feature is available from the router.
A resolver is a function for retrieving data for a page component.
The router will run this function before loading the components.
We're going to define a resolver in the eclipse service.
Open the eclipse service file in your editor.
In some cases, you may see developers to find a resolver in a separate file.
It'll be much faster to define it in our service.
Our service has access to the eclipse collection.
We can skip some of the initial steps of connecting to our database collection.
The first step to using a resolver is to implement the interface at the top of the file import the resolve
interface from the angular slash router package.
Next, implement this interface on the class.
By implementing this interface, we'll be forced to define a function called resolve in the service
before we define this method.
The compiler is not satisfied with our implementation of this service.
The purpose of the resolve function is to return data.
TypeScript would like to know the type of data that will be returned by our function.
We can add the types with generics in a generic at the I clip and null types.
Our function can return a clip object or no value.
Keep in mind, it's possible for a clip not to exist.
We should return null for these scenarios.
The next step is to define the resolve function will define it at the end of the class.
The result function can accept two arguments before we had these arguments.
We're going to need to import some classes to annotate them back at the top of the file import the activated
route snapshot and router state snapshot classes from the angular slash router package.
Back in the function, let's add to arguments called root and state.
The root argument will be annotated with the activated route snapshot class.
This class will store information on the current route being visited.
We'll be able to access the routes parameters through this argument.
The state argument will be annotated with the router state snapshot class.
This argument will store the current representation of our roots in a tree.
We aren't going to be using this argument, but I thought I would mention it just in case.
As for the return value of the function, we have three options.
We are allowed to return a promise observable or raw data.
In most cases, you will either want to return a promise or observable.
These types of values allow for asynchronous operations.
For this example, we're going to return in observable inside the function return the following function.
This eclipse collection dot document.
The goal of defining a resolver is to grab a document from the clips collection.
We can perform a query for a document by calling the document function.
This function has one argument, which is the aid of the document.
We have access to the ID through the root argument.
Let's pass in the following value route params that ID.
After creating the query, we can initiate the request by chaining the get function.
After chaining B get function, you would imagine we're done TypeScript is not happy with the return
value.
To understand why, let's hover our mouse over the function.
Technically, the get function returns and observable that pushes the documents data.
However, the data gets wrapped with an object called a document snapshot.
We need to unwrap the data from the snapshot to satisfy the function after the get function chain,
the pipe function.
We're going to keep things simple by adding the map.
Operator This operator is already imported inside the pipeline.
Add the map function.
Next pass in a function to accept these snapshot arguments.
Inside the function create a variable called data.
Its value will be the snapshot data function.
All snapshots have a function called data.
We're unwrapping the data by storing it in a variable.
It's possible the data could be empty.
If that's the case, we should redirect the user to the home page.
There isn't a point in completing the navigation if there isn't data.
First, we should inject the router service at the top of the file import the router class from the
angular slash router package.
Next in the constructor function and get the service into the component.
Lastly, let's go back to the resolve function in this function, create a conditional statement to
check if the data variable is empty.
If it is, we're going to redirect the user with the router dot navigate function.
You're more than free to redirect them wherever you'd like.
For example, you can redirect them to the 404 page.
In this example, I'm going to redirect them to the home page by passing in an array with a forward
slash character as the first item in the array.
Lastly, will return null from the function to prevent it from running further.
If we were able to find a document, we can return the data variable after the conditional statement.
After making those changes, the function is ready, we can begin accepting this data in our component.
By default, resolvers are not automatically registered with A.
We must manually register a resolver open the app routing module file.
This was the module where we registered the roots at the top of the file import, the clip service.
Next, search for the clip root in the roots array in the object.
We're going to add a property called resolve with an initial value of an object.
In this object, we can add a list of resolvers.
We're going to have one resolver called clip.
Its value will be the clipped service.
Angular will search for a function called resolve in our service if it's available.
This function will be called whenever the user visits this route.
The data returned by the resolve function can be accessed through the property's name in this object.
In this example, we are going to reference the data as clip.
The next step is to grab this data from our component.
Let's begin handling this process in the following lecture.