Hello, everyone, and welcome back.
In these listen, we are going to write our very own angular kirstyn pipe.
We are going to be writing a filter by category pipe that is going to take a series of concerts and
it's going to filter them based on the category.
So we will be able to filter only the beginner courses or only the advanced courses, for example.
First, let's change a little bit here.
Our template, we are going to loop through the list of courses we are going to be using here and for
and we are going to use the usual expression, let the course of courses, courses being these member
variable that we have defined here that is lowering the data here from a courses file.
So this is just some hard coded data that we are going to be using just for demonstration purposes.
And as our application gets reloaded, we are going to see that indeed we have here a series, of course,
cards, and we have here multiple course categories, advanced beginner, etc. Now let's create our
pipe that is going to allow us to apply here a transformation directly at the template and filter out
only the courses we want.
So in order to create a pipe, let's define here in our courses module and new file.
We are going to call it filter by category and we are going to give the extension dot by Dotts.
Once we have our new file, we can declare here our pipe.
So just like the case of a component or other active, a pipe is also going to be at class.
We are going to annotate this class with the angular pipe decorated and we're going to take this class
and we are going to include it here in our courses module.
We are going to add it here at the level of the declarations array, just like the components and directives
of our module.
Next, before starting the implementation here of our pipe, we are going to talk about the public AIPA
of this new pipe that we are about to build.
The filter by Category five is going to be used in the following way.
We are going to apply it here directly in this expression.
The name of the pipe is going to be filter by category.
And this is going to take as a single argument the category that we are filtering for.
So let's say that, for example, we would like only the beginning of the courses.
Now let's see how we are going to implement this pipe.
The first thing that we need to do is to declare the pipe name.
We are going to fill in here the name property, and we're going to define it as filter by category.
So this name here corresponds to the string that we are using here in our template to invoke the pipe.
Let's now implement this class.
We are going to implement here and interface.
We're going to implement the pipe transform interface.
This interface contains only one method is going to be the transform method.
The transfer method is going to receive here a couple of arguments.
The first being the input of the pipe.
That is the output of this expression here.
Let go.
Of course, that is being passed on here to the pipe.
So what we are going to receive here is the courses array.
This is what is getting the pipe applied to.
If you want to make it more visual, you could add here these parenthesis to see what is going on.
It's this expression that is the main input of the pipe.
Let's switch here to our pipe file and we're going to declare here our data input as being a coarse
array.
Next, we are going to need the category that we are filtering.
So this is being passed here to the pipe using the syntax colon.
And then we have here the input argument of the pipe.
This value here, the begin string is going to be available here at the level of the transform method
as the second argument of this method.
And with this, we are ready to implement our transfer method.
So the output of this method is going to be the output of the pipe.
This is what is going to get passed here in place of this pipe.
The expression, so what we are going to return here is the courses filter the collection.
We are going to take the courses input collection and we are going to apply here the array filter before
we are going to take each course in the array and we are going to compare the course category with the
category that we have received here.
And with this we have completed the implementation of our pipe.
Let's now add it here to the exports of our module.
Otherwise we won't be able to use it in our application root module.
Let's now see the pipe in action.
We are going to reload here, our application and we're going to see that this time around.
Only the courses with the beginner category are getting displayed here on the screen.
And if we switch here, these, for example, to advance and we refresh the application, we are going
to see that this time around only the advanced courses are getting displayed as expected.
What we are going to.
Next, we are going to talk about the difference between pure pipes and in pure pipes.
That discussion is going to conclude our pipe section.
And next, we are going to move to internationalization and angular elements.