Angular custom pipe Video Lecture - Angular 2 tutorial - Front-End Programming

this is part 19 of angular 2 tutorial in
this video we'll discuss creating a
custom pipe in angular let's understand
this with an example so here is what we
want to do depending on the gender of
the employee we want to append mister or
miss to the employee name so if you look
at the data that we have here notice the
first three rows are male employees so
to the employee name we are appending
mr. and the last two employees of female
employees and we are appending MS to the
employee name so let's see how to
achieve this by creating a custom
angular pipe this is the same example
that we are being working with so far in
this video series in our previous video
we fixed the date of birth date format
to be in mm DD yyy format within the
constructor but we didn't do that for
the data in this get employees method
this method is called
when we click this button refresh
employees notice at the moment we have
four employees but when we click refresh
employees button this method is called
and it's just employee row is also
loaded but because the date of birth
here within this method is in DD mmm yyy
format it doesn't work as expected look
at this when I click refresh employees
button this is through doesn't load as
expected so let's change the date of
birth date format even in this method to
be in mm DD yyy format so let's change
it for the first row first and let's do
it for this fourth row and finally for
this fifth row let's save our changes
and reload of a web page and we click
refresh employees button notice now the
employees load as expected the first
step to create a custom pipe is to
create a tight script file which is
going to contain the code for our custom
pipe I'm going to place this type script
file within the employee folder because
this pipe deals with appending this
title mr. immerse to the employee name
depending on their gender
so let's create a type script file let's
right click on the employee folder ad
and we want to add a new type script
file I'm going to name this type script
file employee title dot pipe dot es look
at this if we are creating a component
that is here we have employee component
we name it Android component es
similarly when creating a pipe we give
it the name of the pipe dot pipe dot TS
so let's click OK now let's create our
custom pipe class I'm going to mark this
class with export keyword so other
components can import and use it if
required class and in the name of our
class I'm going to name this class
employee title by and this class is
going to implement an interface provided
by angular and that interface is pipe
transform this pipe transform interface
has got one method transform for which
we need to provide implementation so to
this method we're going to pass two
parameters the first parameter is value
which is going to be of type string and
the other parameter is gender which
again is going to be of type string and
this method is going to return string so
what is this method going to do it's
going to receive the name of the
employee and the respective gender and
depending on the gender of the employee
to the name we want to append mr. MS and
then return that name so that it own
type of the method is string and we are
receiving name into value parameter
gender into gender parameter so within
the body of the method let's check the
gender before we check the gender let's
convert that to lowercase and then
compare it to a lower case gender value
so if gender dot tool Loic is equals
male then what do we want to do we want
to return mr dot and to that we want to
append the name of the employee and
within this parameter we will receive
the name of the employee
so let's append that to the title
and written that if the gender is not
male then we know it's going to be
female in that case we want to return
mess and then the name of the employee
now to make a class an angular component
we decorated with component decorator
similarly to make an angular class a
pipe we need to decorate it with pipe
decorator for us to be able to do that
we will have to first import pipe from
angular core now let's decorate our
class with pipe decorator and provide
our custom pipe a name I'm going to set
the name as employee title you can give
it any meaningful name we want now we
can use this name of the pipe anywhere
we want this custom pipe functionality
at a moment notice we still have a
syntax error right here because it
doesn't know about this pipe transform
to be able to implement this pipe
transform interface we will have to
first import it so along with pi let's
also import pipe transform interface
from angular core now we can use this
custom file within the view template of
our employee list component so let's
copy the name of our custom pipe which
is employee title and in the view
template of our employee list component
here we have the binding expression for
displaying employee name so to use a
pipe we use the pipe character and then
followed by that the name of the pipe
the name of our custom pipe is employee
title and this pipe has got two
parameters value and gender value
parameter will receive the name of the
employee gender parameter will have the
gender of the employee by default it
gets the value parameter value we don't
have to pass it explicitly but we will
have to pass the value for gender
parameter so within the view template
let's specify a colon to pass a value
for the parameter and we have the
employee object here we can use the
gender property of the employee object
to retrieve the gender of that respect
to employee
ie Dudley eternity iterating over and
that gets passed to the gender parameter
of our transform method so let's save
all our changes and reload of web page
notice it doesn't do anything beyond
displaying this message right here let's
launch browser developer tools and see
if we have any errors so within the
console tab look at the error message
that we have right here the pipe
employee title could not be found
so basically angler is complaining that
it can't find our custom type employee
title so to fix this error we will have
to first declare our custom pipe within
the module where we need it at the
moment
within our application we only have one
module our root module which is apt of
module TS so within this file let's
first import our custom pipe and then
within the declarations array let's
specify our employee title pipe let's
save our changes and reload of web page
notice now the title mr. or miss is
appended to the employee name depending
on the gender as expected so there are
three simple steps to create and use a
custom pipe the first step is to create
the custom pipe itself it is the code
for creating a custom pipe employee
title pipe and the second step is to
declare the custom pipe in the module
where we need it and the final step is
to use the custom pipe just like any
other built-in angular pipe to use a
pipe we use the pipe character followed
by that the name of the pipe colon and
then any parameters that we may want to
pass to that time thank you for
listening and have a great day