Angular pipes Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 18 of angular2 tutorial in
this video we'll discuss pipes in
angular with examples so what are pipes
and angular pipes transform data before
display for example let's say we want to
transform employee code to uppercase
that's possible using uppercase pipe and
within this annual salary column we want
to display a dollar symbol and maybe we
want to limit the decimal places to
three that's possible using the currency
PI and within this date of birth column
we want to display the name of the month
instead of the number again that's
possible using the date five there are
several built-in pipes provided by
angular like lowercase uppercase decimal
date currency etc let's look at a few
examples now first let transform
employee code to uppercase so here is
the data binding expression to display
the employee code to use a pipe in
angular all we do is next to the data
binding expression we use the pipe
character and then the name of the pipe
the name of the pipe in this case is
uppercase and at the moment we've got
several columns within this table so to
simplify it let's remove all these
columns from index so first let's remove
the th elements and then their
corresponding TD elements we also don't
need all these variables so let's get
rid of them as well let's say all these
changes and reload of web page notice
now employee code is an uppercase now
let's look at another example let's
transform the state of word here is the
data binding expression to display date
of birth so to apply a pipe we use the
pipe character followed by that the name
of the pipe that we want to use we want
to use date pipe because we are
formatting date here and date pipe takes
a parameter so we need to specify a
value for that parameter to specify the
value we
: symbol and then the value for the
parameter I'm going to pass full date as
the value for the parameter the obvious
question that comes to mind at this
point is how do I know what are the
valid values for date parameter
well difficult Arden just a bit for now
let's save all changes and reload of
webpage notice it only has formatted the
second and third rules but not the first
and fourth rows let's investigate why by
launching browser developer tools in the
console we can see we've got a few
errors let's look at the error message
right here notice it says invalid type
argument 25 6 1988 for pipe date pipe so
basically we get this error because it's
extracting the date to be n mm DD yyy
format but we have it n DD mm yyy format
so to fix this errors let's fix the data
that we have so let's open the
typescript file which contains our
hard-coded data and let's change this to
mm DD and yyy and let's do the same
thing with the last row right here mm DD
and yyy so let's save all changes and
resort over page notice now all the rows
are formatted as expected we can also
change pipes together at the moment here
we are using just one pipe date pipe
along with date pipe that say for
example I also want to use the uppercase
pipe so I use another pipe character and
then specify the name of my other pipe
in this case uppercase let's save our
changes and reload of that page notice
now date of birth is in uppercase as
well at the moment they're using full
date as the value for date parameter so
how do I know what are the different
possible values for date parameter
well the answer is angular documentation
here is the documentation for date pi
I'll have this URL available in the
scription of this video as well as on my
blog and here are the possible values
for date parameter you can also use
these symbols right here to control the
format of the date for example if we
want four digit year then we use small
letter Y if we want two digit yeah then
we used two small letter Y characters
similarly if I want two digit month
number I use capital letter mm and if I
want to deject day number then I use two
small letter D characters okay so let's
say for example we want the state to be
in DD mm yyy format then we can specify
the value ass so basically we want to
day numbers so I use two small Afridi's
and to month numbers and use kept the
letter M and then I want four digit year
so I use single small letter Y let's
save these changes and reload of a page
notice now the data is in DD mmm why why
why why format with this example we've
just seen how to pass a single parameter
to a pipe how about passing multiple
parameters to a part the currency pipe
for example takes multiple parameters
let's format the data that we have in
this annual salary column using currency
pipe so within the data binding
expression right here let's use the pipe
character and then the currency pipe and
this pipe takes three parameters the
first parameter is the currency in which
we want this data to be formatted let
say for example we want it to be
formatted in u.s. dollar so I use the
currency code as USD and then we have a
choice here do we want the currency code
like USD or do we want
currency symbol that is the US dollar
symbol if we want the US dollar symbol
we specify another colon and then
specify true indicating that we want the
currency symbol instead of the
good and then the final parameter
controls the number of digits that we
want before and after that in a letter
for example before decimal we want at
least one digit so again within quotes
after colon we specify one that is
minimum of one digits before the decimal
and then I use dot and then I want
minimum three digits after the decimal
and a maximum of three digits as well
okay so here we are passing three
parameters to the currency pipe so let's
see what changes and reload of webpage
notice now the currency column is
formatted as expected so water pipes and
angular pipes transform data before
display angular provides several
built-in types like lowercase uppercase
decimal currency etc to apply a pipe on
a pound property we use the pipe
character and then followed by that the
name of the pipe we can also change
pipes together in this example we are
chaining date and uppercase pipe can
also pass parameters to pipes and to
pass parameters we use column symbol
I've seen examples of passing a single
parameter as well as multiple parameters
you can also create custom pipes
we'll discuss creating custom pipes in
our upcoming videos in this series to
read more about these built in angular
pipes check these URLs right here I'll
have these links available both in the
description of this video as well as on
my blog thank you for listening and have
a great day