Create a custom filter in AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 13 of handle AJ's tutorial
in this video we'll discuss how to
create a custom filter in angular so
what's a custom filter a custom filter
is a function that returns a function to
create a custom filter we use the filter
function let's understand creating
custom filters with an example notice on
the Left we have a table that display
employee data at the moment we have
three columns named gender and salary
look at the gender column we have
integer values within the gender column
one two and three and what we want to do
is write a custom filter that's going to
convert these integer values to their
string representations so one should be
male 2 should be female and 3 should be
not disclosed so let's see how to create
such a custom filter so let's flip to
visual studio now within our script or
J's file notice we have our controller
function within the controller function
we are creating an employee's array at
the moment this array contains 5
employee objects and each employee
object has got name gender and salary
properties and then we are attaching
this to the dollar scope object using
employees variable which is going to be
the model and then within our view
that's an HTML page one dot HTML we're
using a table element to display the
employee data within the tee header
section we have three th elements to
display the column headers name gender
and salary and within tee body section
we are looping through each employee in
employee's array and then binding to
name gender and salary properties so if
we view this page in the browser this is
how the employee data is at the moment
notice the gender values are integers
now we want to convert them to their
string representations male female and
not disclosed so what we want to be able
to do is something like this so on this
gender property what I want to do is
apply a filter gender and this filter
should be able to convert those integer
values to their string representations
so let's go ahead and create this gender
filter so I'm going to go to the script
or J's file and here we have a module
object and look at this when I press dot
the intellisense shows the filter
function which we use to create
custom filter the first parameter for
this function is going to be the name of
the filter so let's call the filter
gender so what's a filter a filter is
nothing but a function that returns a
function so I'm creating an anonymous
function here which is going to return
another function and for this inner
anonymous function I'm going to pass one
parameter I'm going to call it gender so
basically this will be the input for our
filter so in our example the input is
going to be the gender integer values
okay
so I'm going to switch on that integer
value and then return their
corresponding string representations so
switch on the gender and case one so
when it's one we want to return male
similarly when it is two we want to
return female and when it is three we
want to return not this closed so when
it is two I want to return female and
when it is three
let's return not disclosed all right so
that's all there to it to create a
custom filter so our filter name is
gender and we are applying that using
the pipe character like any other built
in angular filter so let's save all
these changes and reload this page and
see what's going to happen look at that
now we get male female not disclosed as
expected so now if you look at this
filter it's present in our script or J's
file actually we have a filter here we
have a controller everything present in
this script or J's file in a real world
application you will have your
controllers you know in a separate
controllers file maybe and filters in a
separate filters file so it's also
possible you know we can have this
filter in a separate filters file so to
our project let's go ahead and add a new
item and we want to add a JavaScript
file and I'm going to call this filters
or J's and I'm going to move this
function which is creating our custom
filter to that file filters dot J s now
this filter method is available on the
module object so here we have a module
object so we want to reference that and
filter dot J's file for intellisense
what I'm going to do is drag and drop
this script dot J's file into our filter
dot J's file so let's drag and drop this
so that should give us
intellisense to get us the moment I type
app we get intelligence and when I type
dot we have the filter function okay all
right so now within our script J's file
we only have our controller function the
filter function is present in a separate
filters dot J's file all right now for
this to work we will have to reference
that filters dot J's file within our
file so I'm going to drag and drop
filters dot J a script file into the
head section right here all right let's
save these changes and reload this page
and it should still work the same way as
before so to create a custom filter we
use the filter function the first
parameter for this function is the name
of the filter that we want to create a
filter is nothing but a function that
returns another function so we have an
anonymous function here which is
returning another anonymous function and
to this inner anonymous function the
first parameter is the input for the
filter so in this case gender is our
filter input and since that is an
integer value I'm using a case statement
to switch on those integer values and
return their corresponding string values
and then we use that filter gender just
like any other built-in angular filters
using the pipe character thank you for
listening and have a great day