1
00:00:00,090 --> 00:00:05,100
In this lecture, we were going to fix our time stamp issue by creating a custom pipe.

2
00:00:05,400 --> 00:00:08,050
We don't want to transform the value directly.

3
00:00:08,340 --> 00:00:10,680
It should remain untouched in the service.

4
00:00:11,040 --> 00:00:14,100
Avoiding mutation can be achieved by using pipes.

5
00:00:14,370 --> 00:00:17,250
Pipes will transform the output in the template.

6
00:00:17,880 --> 00:00:21,060
There's a pipe for formatting dates called the date pipe.

7
00:00:21,390 --> 00:00:24,030
It's a pipe defined by the angular framework.

8
00:00:24,270 --> 00:00:27,420
Unfortunately, we can't apply it to our timestamp.

9
00:00:27,810 --> 00:00:30,180
The value must be a date object.

10
00:00:30,540 --> 00:00:34,350
There's a roundabout solution for applying pipes to custom values.

11
00:00:34,620 --> 00:00:37,500
We can create a pipe for applying a different pipe.

12
00:00:37,860 --> 00:00:42,240
Let me show you what I mean in your ED openly command line.

13
00:00:42,570 --> 00:00:49,710
We're going to run the following command Kng G Pipe Pipes slash F.B. timestamp.

14
00:00:52,200 --> 00:00:55,980
Pipes can be created with the pipe command for this project.

15
00:00:56,130 --> 00:01:00,030
We're going to store our custom pipes in a directory called pipes.

16
00:01:00,360 --> 00:01:04,440
The name of our pipe will transform Firebase timestamps in the template.

17
00:01:04,769 --> 00:01:11,490
By default, the ceiling will generate two files, one file for testing, another file for the pipe

18
00:01:11,490 --> 00:01:12,180
definition.

19
00:01:12,540 --> 00:01:15,260
Our pipe is imported into the app module.

20
00:01:15,480 --> 00:01:20,130
We can start working on the pipe, open the FBI timestamp file.

21
00:01:22,780 --> 00:01:28,150
Inside a pipe definition class will find the minimum set up for a pipe at the top.

22
00:01:28,360 --> 00:01:33,550
We're importing a decorator called pipe and an interface called pipe transform.

23
00:01:34,030 --> 00:01:38,590
The pipe decorator will tell Angular to register our class as a pipe.

24
00:01:38,950 --> 00:01:43,060
Inside the configuration object, we can add the name of our pipe.

25
00:01:43,600 --> 00:01:49,780
As for the pipe transform interface, it'll force our class to define a method called transform.

26
00:01:50,170 --> 00:01:52,880
The transform method is called by angular.

27
00:01:52,900 --> 00:01:58,540
Whenever we add a pipe to an expression, let's begin by making modifications to the class.

28
00:01:59,110 --> 00:02:03,360
Firstly, we should update the arguments list in the transform function.

29
00:02:03,730 --> 00:02:08,620
The transform function will accept two arguments called value and arguments.

30
00:02:09,039 --> 00:02:15,970
The value argument references the value in the expression if our pipe has additional configuration settings.

31
00:02:16,150 --> 00:02:18,880
They'll be added to the arguments argument.

32
00:02:19,300 --> 00:02:21,700
Our pipe isn't going to be configurable.

33
00:02:22,000 --> 00:02:24,310
It's safe to remove the second argument.

34
00:02:27,030 --> 00:02:32,730
The return value can be removed to TypeScript will be able to infer the return type.

35
00:02:33,030 --> 00:02:37,170
Next, we should annotate the value argument by default.

36
00:02:37,320 --> 00:02:41,160
They see a line will annotate this argument with the unknown type.

37
00:02:41,520 --> 00:02:44,130
We should appropriately annotate this argument.

38
00:02:44,460 --> 00:02:47,010
Open the I click model in your editor.

39
00:02:49,530 --> 00:02:55,830
This pipe will be given the time stamp property, any clip object, we annotated this property with

40
00:02:55,830 --> 00:02:57,570
the field value property.

41
00:02:58,050 --> 00:03:00,750
Let's use these same annotation in our pipe.

42
00:03:01,050 --> 00:03:07,890
Back in the timestamped class, import the Firebase object from the Firebase slash app package.

43
00:03:12,290 --> 00:03:20,690
Next, annotate the value argument with the following type Firebase Dot Fire Store Dot field value.

44
00:03:23,180 --> 00:03:27,050
We can proceed to convert this value into a human readable date.

45
00:03:27,350 --> 00:03:29,990
I think it's unnecessary to reinvent the wheel.

46
00:03:30,380 --> 00:03:36,380
Angular provides plenty of support for creating human readable dates with the date pipe, as you can

47
00:03:36,380 --> 00:03:36,770
see.

48
00:03:36,950 --> 00:03:41,460
Pipes are defined as classes were not limited to using them in templates.

49
00:03:41,720 --> 00:03:45,530
They can be added to components, services or other pipes.

50
00:03:45,980 --> 00:03:48,380
We have two options for using a pipe.

51
00:03:48,710 --> 00:03:51,620
We can create a new instance or inject them.

52
00:03:51,980 --> 00:03:54,410
Injection hasn't let us down so far.

53
00:03:54,650 --> 00:04:01,550
We should continue injecting classes at the top of the file import the date pipe class from the angular

54
00:04:01,550 --> 00:04:03,140
slash common package.

55
00:04:05,510 --> 00:04:08,030
Next, add the constructor function.

56
00:04:10,480 --> 00:04:13,600
Lastly, we can inject the date pipe class.

57
00:04:15,990 --> 00:04:17,250
We're not in the clear yet.

58
00:04:17,430 --> 00:04:19,230
Pipes are not injectable.

59
00:04:19,529 --> 00:04:24,930
It's one of the few rare cases where the decorator does not register a class as an injectable.

60
00:04:25,290 --> 00:04:31,720
We can make a class injectable by registering it in a component class or module, for this example.

61
00:04:31,740 --> 00:04:35,820
We are going to register it in the clips list component class.

62
00:04:38,370 --> 00:04:44,580
At the top of the class, import the date pipe class from the angular slash common package.

63
00:04:47,040 --> 00:04:51,330
Inside the component decorator and an array called providers.

64
00:04:53,690 --> 00:04:57,050
Lastly, add the date pint glass to the array.

65
00:04:59,790 --> 00:05:03,270
By adding it to this array, our pipe will become injectable.

66
00:05:03,540 --> 00:05:07,380
We're choosing to make the pipe injectable in the class for one reason.

67
00:05:07,680 --> 00:05:09,990
It's going to result in writing less code.

68
00:05:10,320 --> 00:05:16,590
If we were to add this class to a module, we would need to add it to all modules using this pipe by

69
00:05:16,590 --> 00:05:20,250
adding it to the component class whenever we use the component.

70
00:05:20,280 --> 00:05:22,230
The pipe will become injectable.

71
00:05:22,860 --> 00:05:24,870
Let's go back to our custom pipe.

72
00:05:25,140 --> 00:05:28,050
The next step is to create a data object.

73
00:05:28,440 --> 00:05:33,240
The date pipe prefers to work with JavaScript date objects at the moment.

74
00:05:33,450 --> 00:05:36,660
The value argument is not compatible with the pipe.

75
00:05:36,960 --> 00:05:39,540
We need to convert it into a date object.

76
00:05:39,840 --> 00:05:43,680
Luckily, time stamps have a function for performing this conversion.

77
00:05:44,070 --> 00:05:49,980
Inside the function create a variable called date with the following value value.

78
00:05:50,010 --> 00:05:51,390
Not to date.

79
00:05:52,770 --> 00:05:57,060
The to date function will convert the time stamp into a date object.

80
00:05:57,360 --> 00:06:02,340
There's just one problem TypeScript does not recognize this function on the value.

81
00:06:02,730 --> 00:06:05,640
Our problem is with Firebase is type system.

82
00:06:05,970 --> 00:06:09,900
The time stamp is created with a function called server timestamp.

83
00:06:10,320 --> 00:06:13,650
This function returns an object called field value.

84
00:06:14,220 --> 00:06:17,730
In reality, the object is a timestamp object.

85
00:06:18,090 --> 00:06:21,450
The Firebase Dev team has annotated it differently.

86
00:06:21,840 --> 00:06:24,690
I'm not sure why, but we need to assert the type.

87
00:06:25,140 --> 00:06:28,530
We're going to wrap the value argument with parentheses.

88
00:06:31,030 --> 00:06:38,440
Next, we'll assert the type with the as key word, the type will be the following fire base dot fire

89
00:06:38,440 --> 00:06:40,470
store dot timestamp.

90
00:06:43,130 --> 00:06:49,490
After asserting the type, the compiler errors go away, we can start applying the time to the value

91
00:06:49,700 --> 00:06:56,870
at the end of the function return the following value this date pipe Typekit transform date.

92
00:06:57,050 --> 00:06:58,070
Medium date.

93
00:07:00,650 --> 00:07:03,230
All pipes to finally transform function.

94
00:07:03,560 --> 00:07:06,260
We're directly calling it with the date variable.

95
00:07:06,590 --> 00:07:10,070
The second argument of the function is the format for the date.

96
00:07:10,460 --> 00:07:14,030
You can refer to the documentation for the different formats.

97
00:07:14,480 --> 00:07:18,140
In this example, we're using a format called medium date.

98
00:07:18,380 --> 00:07:21,050
It'll output the month, day and year.

99
00:07:21,620 --> 00:07:22,760
Our pipe is ready.

100
00:07:22,970 --> 00:07:24,830
Let's try it out in our template.

101
00:07:25,070 --> 00:07:27,740
Open the eclipse list template file.

102
00:07:30,160 --> 00:07:34,000
Search for the expression that outputs the date on this expression.

103
00:07:34,150 --> 00:07:36,490
Add the FBI timestamp pipe.

104
00:07:39,090 --> 00:07:41,100
Time to refresh the home page.

105
00:07:43,530 --> 00:07:48,070
In the list of clips, the timestamp is formatted with a human readable date.

106
00:07:48,460 --> 00:07:54,850
The date pipe is a very common type of pipe to use, but there are cases when you may have an incompatible

107
00:07:54,850 --> 00:07:57,730
value rather than re-creating the date pipe.

108
00:07:57,880 --> 00:08:02,800
You can create a custom pipe to act as a layer between the value and date pipe.

109
00:08:03,190 --> 00:08:05,740
It's much simpler than rewriting logic.

110
00:08:06,310 --> 00:08:07,750
Our home page is complete.

111
00:08:08,050 --> 00:08:12,240
In the next lecture, we can move on to the next page, which is the page.

112
00:08:12,250 --> 00:08:14,410
We're playing an individual clip.