In this lecture, we were going to fix our time stamp issue by creating a custom pipe.
We don't want to transform the value directly.
It should remain untouched in the service.
Avoiding mutation can be achieved by using pipes.
Pipes will transform the output in the template.
There's a pipe for formatting dates called the date pipe.
It's a pipe defined by the angular framework.
Unfortunately, we can't apply it to our timestamp.
The value must be a date object.
There's a roundabout solution for applying pipes to custom values.
We can create a pipe for applying a different pipe.
Let me show you what I mean in your ED openly command line.
We're going to run the following command Kng G Pipe Pipes slash F.B. timestamp.
Pipes can be created with the pipe command for this project.
We're going to store our custom pipes in a directory called pipes.
The name of our pipe will transform Firebase timestamps in the template.
By default, the ceiling will generate two files, one file for testing, another file for the pipe
definition.
Our pipe is imported into the app module.
We can start working on the pipe, open the FBI timestamp file.
Inside a pipe definition class will find the minimum set up for a pipe at the top.
We're importing a decorator called pipe and an interface called pipe transform.
The pipe decorator will tell Angular to register our class as a pipe.
Inside the configuration object, we can add the name of our pipe.
As for the pipe transform interface, it'll force our class to define a method called transform.
The transform method is called by angular.
Whenever we add a pipe to an expression, let's begin by making modifications to the class.
Firstly, we should update the arguments list in the transform function.
The transform function will accept two arguments called value and arguments.
The value argument references the value in the expression if our pipe has additional configuration settings.
They'll be added to the arguments argument.
Our pipe isn't going to be configurable.
It's safe to remove the second argument.
The return value can be removed to TypeScript will be able to infer the return type.
Next, we should annotate the value argument by default.
They see a line will annotate this argument with the unknown type.
We should appropriately annotate this argument.
Open the I click model in your editor.
This pipe will be given the time stamp property, any clip object, we annotated this property with
the field value property.
Let's use these same annotation in our pipe.
Back in the timestamped class, import the Firebase object from the Firebase slash app package.
Next, annotate the value argument with the following type Firebase Dot Fire Store Dot field value.
We can proceed to convert this value into a human readable date.
I think it's unnecessary to reinvent the wheel.
Angular provides plenty of support for creating human readable dates with the date pipe, as you can
see.
Pipes are defined as classes were not limited to using them in templates.
They can be added to components, services or other pipes.
We have two options for using a pipe.
We can create a new instance or inject them.
Injection hasn't let us down so far.
We should continue injecting classes at the top of the file import the date pipe class from the angular
slash common package.
Next, add the constructor function.
Lastly, we can inject the date pipe class.
We're not in the clear yet.
Pipes are not injectable.
It's one of the few rare cases where the decorator does not register a class as an injectable.
We can make a class injectable by registering it in a component class or module, for this example.
We are going to register it in the clips list component class.
At the top of the class, import the date pipe class from the angular slash common package.
Inside the component decorator and an array called providers.
Lastly, add the date pint glass to the array.
By adding it to this array, our pipe will become injectable.
We're choosing to make the pipe injectable in the class for one reason.
It's going to result in writing less code.
If we were to add this class to a module, we would need to add it to all modules using this pipe by
adding it to the component class whenever we use the component.
The pipe will become injectable.
Let's go back to our custom pipe.
The next step is to create a data object.
The date pipe prefers to work with JavaScript date objects at the moment.
The value argument is not compatible with the pipe.
We need to convert it into a date object.
Luckily, time stamps have a function for performing this conversion.
Inside the function create a variable called date with the following value value.
Not to date.
The to date function will convert the time stamp into a date object.
There's just one problem TypeScript does not recognize this function on the value.
Our problem is with Firebase is type system.
The time stamp is created with a function called server timestamp.
This function returns an object called field value.
In reality, the object is a timestamp object.
The Firebase Dev team has annotated it differently.
I'm not sure why, but we need to assert the type.
We're going to wrap the value argument with parentheses.
Next, we'll assert the type with the as key word, the type will be the following fire base dot fire
store dot timestamp.
After asserting the type, the compiler errors go away, we can start applying the time to the value
at the end of the function return the following value this date pipe Typekit transform date.
Medium date.
All pipes to finally transform function.
We're directly calling it with the date variable.
The second argument of the function is the format for the date.
You can refer to the documentation for the different formats.
In this example, we're using a format called medium date.
It'll output the month, day and year.
Our pipe is ready.
Let's try it out in our template.
Open the eclipse list template file.
Search for the expression that outputs the date on this expression.
Add the FBI timestamp pipe.
Time to refresh the home page.
In the list of clips, the timestamp is formatted with a human readable date.
The date pipe is a very common type of pipe to use, but there are cases when you may have an incompatible
value rather than re-creating the date pipe.
You can create a custom pipe to act as a layer between the value and date pipe.
It's much simpler than rewriting logic.
Our home page is complete.
In the next lecture, we can move on to the next page, which is the page.
We're playing an individual clip.