×
BLUE
Angular Pipes


Angular Pipes
  23 June 2021
Read more Like this Post.
in angular pipes transform data before render or displaying. there is several pipes in angular like uppercase, lowercase, currency, Dates, etc.

for example we want to show username in uppercase for example: if username is "nancy" the output well be "NANCY". let pass uppercase pipe in angular html Employee table like this.
# Empolyee name Date of Birth gender Salary
1 {{ "nancy" | uppercase }} 27/4/2001 female 980.00
in the above html table td name ("nancy") will interpolate with uppercase pipe we can pass pipe following by (" | ") pipe sign. the output of the code is "NANCY".

Date Pipe

we can convert months digits and words, convert day's in words and limit the years digit's by using date pipe. first we need to apply date pipe and pass a parameter on it passing parameters like this: note: this is the date td of above code.
       {{ "7/5/2001" | date: 'fullDate' }}
in the code we pass a parameter in date pipe by using ( : ) symbol the output of the code is: "Thursday, July 5, 2001" this pipe convert digit's date into user readable date. in date pipe we can pass possible parameters of date.
  • 'fullDate' = "yMMMMEEEEd" ( Thursday, July 5, 2001 )
  • 'short' = "yMdjm" ( 7/5/01, 12:00 AM )
  • 'medium' = "yMMMdjms" ( Jul 5, 2001, 12:00:00 AM )
  • 'shortTime' = "jm" ( 12:00 AM)
  • 'mediumDate' = "yMMMd" ( Jul 5, 2001 )
  • 'mediumTime' = "jms" ( 12:00:00 AM )
  • 'longDate' = "yMMMMd" ( July 5, 2001 )
  • 'shortDate' = "yMd" ( 7/5/01 )
if you want to show year first then day and in last month you can use the parameter like this:
 {{ "7/5/2001" | date: 'y/d/M' }}
in the code we pass a parameter in date pipe by using ( : ) symbol the output of the code is: "Thursday, July 5, 2001"
this pipe convert digit's date into user readable date. in date pipe we can pass possible parameters of date.
  • 'fullDate' = "yMMMMEEEEd" ( Thursday, July 5, 2001 )
  • 'short' = "yMdjm" ( 7/5/01, 12:00 AM )
  • 'medium' = "yMMMdjms" ( Jul 5, 2001, 12:00:00 AM )
  • 'shortTime' = "jm" ( 12:00 AM)
  • 'mediumDate' = "yMMMd" ( Jul 5, 2001 )
  • 'mediumTime' = "jms" ( 12:00:00 AM )
  • 'longDate' = "yMMMMd" ( July 5, 2001 )
  • 'shortDate' = "yMd" ( 7/5/01 )
if you want to show year first then day and in last month you can use the parameter like this:
 {{ "7/5/2001" | date: 'y/d/M' }}
the output is : " 2001/5/7 "
there is all possible values:
  • y : for year if you want use only last two digit of the year you can use ( yy ) it show only last two digit's.
  • M : for month if you want to show two digit's of months you can use ( MM ) like ( 07 ).
  • d : for day if you want to show two digit's of day you can use ( dd ) like ( 05 ).
  • E : for weekday for showing only three words of the day name also use ( EEE ) like "sunday" will be "sun".
  • j : for 24Hours
  • h : for 12Hours

Currency Pipe

the currency pipe used for money for example:
 {{ "980.00" | currency }} 
the output is : $980.00 the dollar( $ ) sign is default currency sign. if it's not show the dollar sign use the code like this.
{{ "980.00" | currency: 'USD':true }} 
set currency parameter 'USD' as true it showing dollor sign.
we can pass multiple parameters in the pipe like currency pipe:
{{ "980.301" | currency: 'USD':true: '1.3-3'}} 
{{ "980.0302" | currency: 'USD':true: '1.3-3'}} 

in the above code we have two td elements which have some digits first td digits is "980.00" have 2 digits after decimal and the second element have 3 digits and we pass a currency pipe with 2 paramaters first for adding dollor symbols and second for controlling the digits. in the paramaters like ' 1.3-3' in the code first 1 for showing digits before the decimal and 3 for minium digits of after the decimal and last 3 for adding max digits after decimal.

Chain of pipes

we can add multiple pipes by using pipe ( | ) symbol for example:
 {{ "7/5/2001" | date: 'y/d/M' | uppercase }}
in the code we convert the date into words and uppercase. this used two pipes this method called Chain of pipes.
Related Post's

angular   data-pipes   decorators  
Not Loaded Zohaib Jozvi
0 23 June 2021
Read Latest Post.
Read other post.