1
00:00:00,570 --> 00:00:01,460
Hello again, everyone.

2
00:00:01,470 --> 00:00:08,990
So the last lesson we went over some some interesting things about using pipes, right?

3
00:00:09,570 --> 00:00:16,590
We examine the pipe examples that Angular offers to us and in fact, you notice that.

4
00:00:17,840 --> 00:00:18,870
We got faster.

5
00:00:19,970 --> 00:00:26,090
So now let's say that we have a product and we want to print the description of this product and I want

6
00:00:26,090 --> 00:00:28,070
to prepare this statement using a pipe.

7
00:00:28,530 --> 00:00:34,940
Well, we can do this by creating our own custom pipe.

8
00:00:36,050 --> 00:00:39,380
So now create a new test file to create my own pipe.

9
00:00:40,570 --> 00:00:45,220
So in this file of first import the pipe information from angular core.

10
00:00:56,920 --> 00:01:05,410
Now we can use a method called transform in this class, and this method will come from the pipe transform

11
00:01:05,410 --> 00:01:06,670
that we wrote here.

12
00:01:07,860 --> 00:01:09,120
So added in here.

13
00:01:15,400 --> 00:01:20,680
Now I'm doing the class definition and this class will implement pipe transform.

14
00:01:26,250 --> 00:01:32,250
Now that the redness has gone off, click on the class name and say, implement, interface, transform.

15
00:01:33,340 --> 00:01:35,950
Transform method is added, as you can see.

16
00:01:36,990 --> 00:01:45,870
And now this method expects a parameter of any type so we can send a string, a number or a different

17
00:01:45,870 --> 00:01:47,010
type of value here.

18
00:01:48,120 --> 00:01:51,660
And secondly, we can use a list of arguments.

19
00:01:52,590 --> 00:01:58,110
So we created this file and we will continue with some of the arrangements later.

20
00:01:59,540 --> 00:02:08,660
So now I'll just open up the TS file of our component and here I can make some text for explanation.

21
00:02:15,580 --> 00:02:20,350
And now I will use this text in the HTML file with the string interpolation.

22
00:02:24,730 --> 00:02:27,280
And here we're going to use pipes like this.

23
00:02:31,160 --> 00:02:39,650
So I write the name of the pipe that we'll use and this can be the same as the class name that we use

24
00:02:40,550 --> 00:02:47,540
now, of course, it has to start with a capital letter here and here we send a string parameter.

25
00:02:49,240 --> 00:02:53,860
For now, it's not necessary now I'll just return the substring value of the parameter here.

26
00:03:08,290 --> 00:03:13,120
Now, we'll need to associate this file with the pipe name that we wrote on the template.

27
00:03:14,610 --> 00:03:20,880
And I hope that you remember this from The Selecter section when we were creating the component.

28
00:03:22,650 --> 00:03:27,060
And just like the components, we will use the pipe decorator here.

29
00:03:27,970 --> 00:03:35,650
And inside here, I'll write the name variable, and here will be the name that we use in the template.

30
00:03:40,500 --> 00:03:43,890
Now, there's one more thing that we're going to need to do.

31
00:03:45,090 --> 00:03:50,070
Of course, this pipe fire that we created needs to be introduced to the app module.

32
00:03:51,950 --> 00:03:57,610
You remember that, right, when we create a new component, we need to introduce it to the app module,

33
00:03:58,160 --> 00:04:02,510
so we need to introduce this file in the same way.

34
00:04:02,510 --> 00:04:09,260
So I'll write the class name and the declarations and here I'll import the file.

35
00:04:10,720 --> 00:04:16,210
So now we can embed our file in the app module and now we can use this pipe we created.

36
00:04:17,420 --> 00:04:19,550
So we'll save all the changes and.

37
00:04:20,570 --> 00:04:25,370
See how it works and yeah, we can see the text that we created here.

38
00:04:26,410 --> 00:04:28,150
And bingo, just like that.

39
00:04:31,890 --> 00:04:37,650
All right, so in this lesson, we learned how to speed up the work flow by using pipes.

40
00:04:40,050 --> 00:04:47,190
And with this particular subject, we have completed our data binding part, all right, so that means

41
00:04:47,190 --> 00:04:51,270
that we will talk about angular directives in the next section.

42
00:04:52,160 --> 00:04:52,970
I'll see you then.

43
00:04:53,000 --> 00:04:55,120
Until then, bye for now.