Hello again, everyone.
So the last lesson we went over some some interesting things about using pipes, right?
We examine the pipe examples that Angular offers to us and in fact, you notice that.
We got faster.
So now let's say that we have a product and we want to print the description of this product and I want
to prepare this statement using a pipe.
Well, we can do this by creating our own custom pipe.
So now create a new test file to create my own pipe.
So in this file of first import the pipe information from angular core.
Now we can use a method called transform in this class, and this method will come from the pipe transform
that we wrote here.
So added in here.
Now I'm doing the class definition and this class will implement pipe transform.
Now that the redness has gone off, click on the class name and say, implement, interface, transform.
Transform method is added, as you can see.
And now this method expects a parameter of any type so we can send a string, a number or a different
type of value here.
And secondly, we can use a list of arguments.
So we created this file and we will continue with some of the arrangements later.
So now I'll just open up the TS file of our component and here I can make some text for explanation.
And now I will use this text in the HTML file with the string interpolation.
And here we're going to use pipes like this.
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
now, of course, it has to start with a capital letter here and here we send a string parameter.
For now, it's not necessary now I'll just return the substring value of the parameter here.
Now, we'll need to associate this file with the pipe name that we wrote on the template.
And I hope that you remember this from The Selecter section when we were creating the component.
And just like the components, we will use the pipe decorator here.
And inside here, I'll write the name variable, and here will be the name that we use in the template.
Now, there's one more thing that we're going to need to do.
Of course, this pipe fire that we created needs to be introduced to the app module.
You remember that, right, when we create a new component, we need to introduce it to the app module,
so we need to introduce this file in the same way.
So I'll write the class name and the declarations and here I'll import the file.
So now we can embed our file in the app module and now we can use this pipe we created.
So we'll save all the changes and.
See how it works and yeah, we can see the text that we created here.
And bingo, just like that.
All right, so in this lesson, we learned how to speed up the work flow by using pipes.
And with this particular subject, we have completed our data binding part, all right, so that means
that we will talk about angular directives in the next section.
I'll see you then.
Until then, bye for now.