[SOUND]. In a previous lecture we saw how to create and use a custom filter with just the input expression as the argument and no additional arguments to the filter function. In this lecture we're going to go over how to create a custom filter that accepts additional custom arguments as well. The process for that is pretty much the same as before. The first thing you need to do is define the filter factory function. Except this time, what you return is a created filter function with some additional arguments, beside the very first one which is the input. The second step is exactly as it was before, you register the Filter Factory function except this Filter Factory function is the one that's now returning a filter function that has custom arguments besides the inputs attached to is as well. So in this step there is no change. The third step is fairly simple as well. You have to inject your filter into your controller or whatever other JavaScript construct you try to inject it into. And obviously when you use the filter you wouldn't just give it the input, which in this case is message, but you would also give it some additional value that would correspond to that extra custom argument. In this case it's a string literal called "some val'. We can also use our custom filter directly in our HTML templates. The process for creating such a filter is exactly the same. The only difference is the last step when you actually use it inside of an HTML template instead of inside of your JavaScript. You still have to create your filter factory function and then register it with the module. The name you registered the filter factory with the module is the name you use inside of your HTML template. You do not append the word filter to it. And since we're inside HTML, there's no need to inject a filter into the controller at all. Angular takes care of these references for you automatically. Now, if you need to use extra custom argument inside of your filter inside the HTML template, you simply follow the name of your filter by a colon and an argument and an another colon and an another argument. And keeps going until you satisfy all the arguments that you have in your custom filter. You can also chain filters by simply separating them with the pipe character which will make the result of one filter be with input to the next one in the chain until the very last filter which outputs a result displayed directly to the user. Now, let's jump back into our code editor and see these concepts in action. Okay. So we're back in our code editor, and we are exactly where we left off from the previous part. Let's create another filter, and then use it inside of HTML. And since Yaakov loves to eat healthy snacks at night, it's not exactly 100% accurate. Let's go ahead and create another filter. We'll start by creating the filter factory function, and we'll call this one function TruthFilter. And since it's a factory function, we'll need to return again a function, oops not the fun, but the function. This time let's go ahead and specify some custom arguments. We'll call one target and the other one replace. I want to be able to let the user of this filter specify what the target string is and what we should replace that string with. And it's easy enough to code up this function because it's exactly the same as this one. We'll just copy and paste right here. And instead of likes and loves we'll just say target and replace, we'll save that. The next step is for us to register our filter factory with the angular.js module. So let's go up again and again we'll instead of terminating that line we'll continue it, we'll say another filter and this filter is going to be called truth. And the name of our factory is TruthFilter. We'll save that and since we are going to be using it inside of HTML, we don't really need to inject it inside of our message controller. We could just jump straight to the HTML and start using our truth filter. Let's go back over here and let's create another br and we'll say Truth and we'll say again sayLovesMessage. And this time, since we're using the filter inside of HTML, we'll specify using a pipe. And the name that we registered our factory function with, which is truth. And since we need to not just give it the name, but also the arguments of what we're looking. The first one was target. And in this case we'll say healthy. In the replace string, we'll be at another colon and will be cookie. Let's put a space here, so when we save that and go back to out HTML page, we'll see now the the truth is Yaakov loves to eat cookies snacks at night, much closer to the truth. But we're not done yet. It turns out that in Angular you could do something even cooler than that. You can actually chain these filters one after the other. So let's go ahead and put another break right here. And we'll say, big truth, BIG TRUTH. And in this case, what we're going to do is we're going to copy the same line that we had before, right here. We'll paste it right here but instead of stopping at this replacement filter our custom replacement filter truth. Let's put a pipe over here, one more pipe and we'll say uppercase. We'll call the uppercase filter right on the output of our true filters. So now we're chaining our filters. There's one, there's actually a filter inside of that that switches our message from likes to love. Then the truth filter kicks in and filters that message and takes out healthy with the word cookie and then the upper case filter should take whatever the outcome of this truth filter is and upper case the whole thing. So let's go ahead and save that. Go to our HTML page and sure enough the big truth is Yaakov loves to eat cookie snacks at night and he's looking a little sad so let's feed him. That's much, much better. So let's summarize. We went over the steps to create a custom filter. The first thing you need to do is to define the filter factory function, that's the thing that's going to create the function that is actually the filter. Then we take that filter factory function and we register it with our module. Now to use our custom filter in JavaScript we simply need to inject the filter function registeredName with a word filter attached to the back of it, into our controller or some other construct that we're trying to use it in inside of our JavaScript. The registered name is the name you registered the filter factory function with. To use it inside HTML, we don't need to inject anything into the controller. We simply take an expression, followed by a pipe, and give it the name of our filter. And that's again the registered name that you registered the filter factory function with in the module. Now you can also create custom filters that takes some extra arguments beside the actual input that the filter we work on. In order to do that, all we have to do is really specify those extra arguments on the actual filter function that we specify inside of our factory function. Otherwise the steps for the rest of the procedure is exactly the same. It's the same registration and the same injection, if you want to use it inside your JavaScript. To use a custom filter with extra arguments inside your HTML, all you have to do is follow an expression by a pipe with the registeredName of the factory function, followed by colon and an argument, colon and an argument, and so on. One of the really neat features in angle.js is that filers can be chained. In order to chain the filters, you take an expression, followed by a pipe, followed by the filter name, followed by another pipe and the next filter name, and the result from one filter becomes the input into the second filter. And the result from the second filter becomes the input into the third and so on.
