1
00:00:03,700 --> 00:00:05,890
Hello, everyone, and welcome back.

2
00:00:06,070 --> 00:00:10,640
In these listen, we are going to write our very own angular kirstyn pipe.

3
00:00:10,810 --> 00:00:17,140
We are going to be writing a filter by category pipe that is going to take a series of concerts and

4
00:00:17,140 --> 00:00:19,630
it's going to filter them based on the category.

5
00:00:19,630 --> 00:00:25,950
So we will be able to filter only the beginner courses or only the advanced courses, for example.

6
00:00:25,990 --> 00:00:28,300
First, let's change a little bit here.

7
00:00:28,330 --> 00:00:34,780
Our template, we are going to loop through the list of courses we are going to be using here and for

8
00:00:34,810 --> 00:00:40,780
and we are going to use the usual expression, let the course of courses, courses being these member

9
00:00:40,780 --> 00:00:46,310
variable that we have defined here that is lowering the data here from a courses file.

10
00:00:46,330 --> 00:00:52,030
So this is just some hard coded data that we are going to be using just for demonstration purposes.

11
00:00:52,050 --> 00:00:57,760
And as our application gets reloaded, we are going to see that indeed we have here a series, of course,

12
00:00:57,760 --> 00:01:04,810
cards, and we have here multiple course categories, advanced beginner, etc. Now let's create our

13
00:01:04,810 --> 00:01:11,170
pipe that is going to allow us to apply here a transformation directly at the template and filter out

14
00:01:11,170 --> 00:01:12,760
only the courses we want.

15
00:01:12,790 --> 00:01:17,980
So in order to create a pipe, let's define here in our courses module and new file.

16
00:01:18,110 --> 00:01:25,030
We are going to call it filter by category and we are going to give the extension dot by Dotts.

17
00:01:25,240 --> 00:01:28,810
Once we have our new file, we can declare here our pipe.

18
00:01:28,820 --> 00:01:34,530
So just like the case of a component or other active, a pipe is also going to be at class.

19
00:01:34,540 --> 00:01:41,440
We are going to annotate this class with the angular pipe decorated and we're going to take this class

20
00:01:41,440 --> 00:01:44,790
and we are going to include it here in our courses module.

21
00:01:44,800 --> 00:01:51,190
We are going to add it here at the level of the declarations array, just like the components and directives

22
00:01:51,190 --> 00:01:52,500
of our module.

23
00:01:52,660 --> 00:01:59,290
Next, before starting the implementation here of our pipe, we are going to talk about the public AIPA

24
00:01:59,320 --> 00:02:01,660
of this new pipe that we are about to build.

25
00:02:01,690 --> 00:02:05,470
The filter by Category five is going to be used in the following way.

26
00:02:05,500 --> 00:02:08,729
We are going to apply it here directly in this expression.

27
00:02:08,949 --> 00:02:12,640
The name of the pipe is going to be filter by category.

28
00:02:12,730 --> 00:02:17,850
And this is going to take as a single argument the category that we are filtering for.

29
00:02:17,860 --> 00:02:22,320
So let's say that, for example, we would like only the beginning of the courses.

30
00:02:22,390 --> 00:02:24,950
Now let's see how we are going to implement this pipe.

31
00:02:24,970 --> 00:02:28,240
The first thing that we need to do is to declare the pipe name.

32
00:02:28,250 --> 00:02:34,510
We are going to fill in here the name property, and we're going to define it as filter by category.

33
00:02:34,510 --> 00:02:40,890
So this name here corresponds to the string that we are using here in our template to invoke the pipe.

34
00:02:40,900 --> 00:02:42,640
Let's now implement this class.

35
00:02:42,640 --> 00:02:45,220
We are going to implement here and interface.

36
00:02:45,250 --> 00:02:48,870
We're going to implement the pipe transform interface.

37
00:02:48,880 --> 00:02:53,620
This interface contains only one method is going to be the transform method.

38
00:02:53,620 --> 00:02:57,250
The transfer method is going to receive here a couple of arguments.

39
00:02:57,430 --> 00:03:00,610
The first being the input of the pipe.

40
00:03:00,610 --> 00:03:03,850
That is the output of this expression here.

41
00:03:04,000 --> 00:03:04,450
Let go.

42
00:03:04,570 --> 00:03:07,460
Of course, that is being passed on here to the pipe.

43
00:03:07,480 --> 00:03:11,600
So what we are going to receive here is the courses array.

44
00:03:11,620 --> 00:03:15,010
This is what is getting the pipe applied to.

45
00:03:15,010 --> 00:03:20,770
If you want to make it more visual, you could add here these parenthesis to see what is going on.

46
00:03:20,770 --> 00:03:25,020
It's this expression that is the main input of the pipe.

47
00:03:25,030 --> 00:03:32,050
Let's switch here to our pipe file and we're going to declare here our data input as being a coarse

48
00:03:32,050 --> 00:03:32,660
array.

49
00:03:32,800 --> 00:03:36,260
Next, we are going to need the category that we are filtering.

50
00:03:36,310 --> 00:03:40,600
So this is being passed here to the pipe using the syntax colon.

51
00:03:40,600 --> 00:03:43,780
And then we have here the input argument of the pipe.

52
00:03:43,810 --> 00:03:49,840
This value here, the begin string is going to be available here at the level of the transform method

53
00:03:50,050 --> 00:03:52,930
as the second argument of this method.

54
00:03:52,930 --> 00:03:56,500
And with this, we are ready to implement our transfer method.

55
00:03:56,500 --> 00:04:01,620
So the output of this method is going to be the output of the pipe.

56
00:04:01,630 --> 00:04:06,010
This is what is going to get passed here in place of this pipe.

57
00:04:06,040 --> 00:04:11,500
The expression, so what we are going to return here is the courses filter the collection.

58
00:04:11,500 --> 00:04:17,720
We are going to take the courses input collection and we are going to apply here the array filter before

59
00:04:17,860 --> 00:04:23,650
we are going to take each course in the array and we are going to compare the course category with the

60
00:04:23,650 --> 00:04:25,690
category that we have received here.

61
00:04:25,780 --> 00:04:29,530
And with this we have completed the implementation of our pipe.

62
00:04:29,530 --> 00:04:32,830
Let's now add it here to the exports of our module.

63
00:04:32,980 --> 00:04:37,620
Otherwise we won't be able to use it in our application root module.

64
00:04:37,690 --> 00:04:39,850
Let's now see the pipe in action.

65
00:04:39,850 --> 00:04:44,230
We are going to reload here, our application and we're going to see that this time around.

66
00:04:44,230 --> 00:04:48,970
Only the courses with the beginner category are getting displayed here on the screen.

67
00:04:49,060 --> 00:04:54,370
And if we switch here, these, for example, to advance and we refresh the application, we are going

68
00:04:54,370 --> 00:04:59,470
to see that this time around only the advanced courses are getting displayed as expected.

69
00:04:59,650 --> 00:05:00,460
What we are going to.

70
00:05:00,610 --> 00:05:06,650
Next, we are going to talk about the difference between pure pipes and in pure pipes.

71
00:05:06,700 --> 00:05:10,280
That discussion is going to conclude our pipe section.

72
00:05:10,300 --> 00:05:15,250
And next, we are going to move to internationalization and angular elements.