Tuesday, 26 June 2018

Angular – Pipes

Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.
Once data arrive, you could push their raw toString values directly to the view, but that rarely makes for a good user experience. For example, in most use cases, users prefer to see a date in a simple format like April 15, 1988 rather than the raw string format Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time).
Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.

Using pipes:
A pipe takes in data as input and transforms it to a desired output. In this page, you'll use pipes to transform a component's birthday property into a human-friendly date.
src/app/hero-birthday1.component.ts
import { Component } from '@angular/core';

  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}
Inside the interpolation expression, you flow the component's birthday value through the pipe operator ( | ) to the Date pipe function on the right. All pipes work this way.

Built-in pipes:
Angular comes with a stock of pipes such as DatePipeUpperCasePipeLowerCasePipeCurrencyPipe, and PercentPipe. They are all available for use in any template.

Parameterizing a pipe:
A pipe can accept any number of optional parameters to fine-tune its output. To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:'EUR'). If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5)
Modify the birthday template to give the date pipe a format parameter. After formatting the hero's April 15th birthday, it renders as 04/15/88:
src/app/app.component.html
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
Write a second component that binds the pipe's format parameter to the component's format property. Here's the template for that component:
src/app/hero-birthday2.component.ts (template)
  <p>The hero's birthday is {{ birthday | date:format }}</p>
  <button (click)="toggleFormat()">Toggle Format</button>
`
You also added a button to the template and bound its click event to the component's toggleFormat() method. That method toggles the component's format property between a short form ('shortDate') and a longer form ('fullDate').
src/app/hero-birthday2.component.ts (class)
export class HeroBirthday2Component {
  birthday = new Date(1988, 3, 15); // April 15, 1988
  toggle = true; // start with true == shortDate

  get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }
  toggleFormat() { this.toggle = !this.toggle; }
}
As you click the button, the displayed date alternates between "04/15/1988" and "Friday, April 15, 1988".






Pre-defined date pipe format options:
Examples are given in en-US locale.
  • 'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
  • 'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
  • 'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
  • 'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
  • 'shortDate': equivalent to 'M/d/yy' (6/15/15).
  • 'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
  • 'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
  • 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
  • 'shortTime': equivalent to 'h:mm a' (9:03 AM).
  • 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
  • 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
  • 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).


Chaining pipes:
You can chain pipes together in potentially useful combinations. In the following example, to display the birthday in uppercase, the birthday is chained to the DatePipe and on to the UpperCasePipe. The birthday displays as APR 15, 1988.
src/app/app.component.html
The chained hero's birthday is
{{ birthday | date | uppercase }}
This example—which displays FRIDAY, APRIL 15, 1988—chains the same pipes as above, but passes in a parameter to date as well.
src/app/app.component.html
The chained hero's birthday is
{{  birthday | date:'fullDate' | uppercase }}



69 comments:

  1. Hey, Wow Provided Post will be Very much Informative to the People Who Visit this Site. Good Work! Thank You for Sharing.
    manufacturing erp software in chennai

    ReplyDelete
  2. AWS Training in Bangalore - Live Online & Classroom
    myTectra Amazon Web Services (AWS) certification training helps you to gain real time hands on experience on AWS. myTectra offers AWS training in Bangalore using classroom and AWS Online Training globally. AWS Training at myTectra delivered by the experienced professional who has atleast 4 years of relavent AWS experince and overall 8-15 years of IT experience. myTectra Offers AWS Training since 2013 and retained the positions of Top AWS Training Company in Bangalore and India.


    IOT Training in Bangalore - Live Online & Classroom
    IOT Training course observes iot as the platform for networking of different devices on the internet and their inter related communication. Reading data through the sensors and processing it with applications sitting in the cloud and thereafter passing the processed data to generate different kind of output is the motive of the complete curricula. Students are made to understand the type of input devices and communications among the devices in a wireless media.

    ReplyDelete
  3. Existing without the answers to the difficulties you’ve sorted out through this guide is a critical case, as well as the kind which could have badly affected my entire career if I had not discovered your website.
    Digital Marketing Training in Chennai

    Digital Marketing Training in Bangalore

    digital marketing training in tambaram

    digital marketing training in annanagar

    digital marketing training in marathahalli

    ReplyDelete
  4. Thanks for your informative article, Your post helped me to understand the future and career prospects & Keep on updating your blog with such awesome article.
    python training institute in chennai
    python training in chennai
    python training in chennai

    ReplyDelete
  5. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging

    Cloud Training
    Cloud Training in Chennai

    ReplyDelete
  6. All the points you described so beautiful. Every time i read your i blog and i am so surprised that how you can write so well.
    Blueprism training in marathahalli

    Blueprism training in btm

    ReplyDelete
  7. Awesome article. It is so detailed and well formatted that i enjoyed reading it as well as get some new information too.

    Data Science training in Chennai
    Data science training in bangalore
    Data science online training
    Data science training in pune

    ReplyDelete
  8. Thank you for taking the time and sharing this information with us. It was indeed very helpful and insightful while being straight forward and to the point.
    java training in chennai | java training in bangalore


    java training in tambaram | java training in velachery

    ReplyDelete
  9. Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..

    angularjs Training in bangalore

    angularjs Training in btm

    angularjs Training in electronic-city

    angularjs online Training

    angularjs Training in marathahalli

    ReplyDelete
  10. It's very great post... Really you are... done a wonderful job Keep up the good work and continue sharing like this.
    Dot Net Training in Chennai | Dot Net Training in Kanchipuram

    ReplyDelete
  11. our Blog is really awesome with useful and helpful content for us.Thanks for

    sharing ..keep updating more information.
    Java Training in Chennai | Java Training in Kanchipuram

    ReplyDelete
  12. It's very great post...Thanks for sharing such an informative post..
    Android Training in Chennai | Android Training in Kanchipuram

    ReplyDelete
  13. This blog very easily understandable. Thanks for sharing such an informative post with us.This is a nice post in an interesting line of content.
    Robotic Process Automation Training in Chennai | Robotic Process Automation Training in Taramani

    ReplyDelete
  14. Your Blog is really awesome with useful and helpful content for us.Thanks for sharing ..keep updating more information.
    Java Training in Chennai | Java Training in Adyar

    ReplyDelete
  15. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge.
    iOS Training in Chennai | iOS Training in Tambaram

    ReplyDelete
  16. All the points you described so beautiful. Every time i read your blog content and i so surprised that how you can write so well.
    Python Training in Chennai | Python Training in Madipakkam

    ReplyDelete
  17. This is a nice post in an interesting line of content.Thanks for sharing this article.
    ISTQB Training in Chennai | ISTQB Training in Guindy

    ReplyDelete
  18. Thanks its Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us.
    Graphic Designing Training in Chennai | Graphic Designing Training in Keelkattalai

    ReplyDelete
  19. I have read your blog its very attractive and impressive. I like it your blog...
    Ethical Hacking Training in Chennai | Ethical Hacking Training in Thiruvanmiyur

    ReplyDelete
  20. Excellent information with unique content and it is very useful to know about the information based on blogs...
    Android Training in Chennai | Android Training in Porur

    ReplyDelete
  21. The provided information’s are very useful to me.Thanks for sharing.Keep updating your blog...
    IOS Training Institute in Chennai | IOS Training Institute in Velachery

    ReplyDelete
  22. Very interesting content which helps me to get the in depth knowledge about the technology.
    Java Training in Chennai | Java Training in Meenambakkam

    ReplyDelete
  23. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
    ISTQB Certification Course in Chennai | ISTQB Certification Course in Sozhinganallur

    ReplyDelete
  24. Thanks for sharing this valuable information.. I saw your website and get more details..Nice work...
    Software Testing Course in Chennai | Software Testing Course in Perungudi

    ReplyDelete
  25. This blog very easily understandable. Thanks for sharing such an informative post with us.This is a nice post in an interesting line of content.
    Software Testing Course in Chennai | Software Testing Course in Keelkattalai

    ReplyDelete
  26. Nice and good article. It is very useful for me to learn and understand easily. Thanks for sharing your valuable information and time. Please keep updating...
    IOS Training Institute in Chennai | IOS Training Institute in Pallavaram

    ReplyDelete
  27. This is a nice post in an interesting line of content.Thanks for sharing this article.
    Selenium Automation Course in Chennai | Selenium Automation Course in Pallikaranai

    ReplyDelete
  28. Really i enjoyed very much. And this may helpful for lot of peoples. So you are provided such a nice and great article within this.
    Advanced Python course in Chennai | Advanced Python course in Besant Nagar

    ReplyDelete
  29. In the event that the plumber does not have his very own general obligation arrangement, any harms would be secured by your property holders protection. southbury plumber

    ReplyDelete
  30. Thanks for posting this useful content, Good to know about new things here,Keep updating your blog...
    Advanced SoftwareTesting Course in Chennai | Advanced SoftwareTesting Course in Saidapet

    ReplyDelete
  31. This is really too useful and have more ideas from yours. keep sharing many techniques and thanks for sharing the information.
    Android Training Institute in Chennai | Android Training Institute in Velachery

    ReplyDelete
  32. This is really impressive post, I am inspired with your post, do post more blogs like this, I am waiting for your blogs.
    Machine Learning Training Institute in chennai | Best machine learning Training in Chennai

    ReplyDelete
  33. Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us
    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete
  34. Really i enjoyed very much. And this may helpful for lot of peoples. So you are provided such a nice and great article within this.
    Microsoft Azure Training Institute in Chennai | Microsoft Azure Training Institute in Thiruvanmiyur

    ReplyDelete
  35. Very good and informative article. Thanks for sharing such nice article, keep on updating such good articles.
    IOS Training Institute in Chennai | IOS Training Institute in Tambaram

    ReplyDelete
  36. Nice and good article. It is very useful for me to learn and understand easily. Thanks for sharing your valuable information and time. Please keep updating...
    Summer Course Training in Chennai | Summer Course Training in OMR

    ReplyDelete
  37. Thanks its Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us.
    Vacation Training Course in Chennai | Vacation Training Course in Adyar

    ReplyDelete
  38. I enjoyed reading the Post. It was very informative and useful.
    Summer Course in Chennai | Summer Course in Medavakkam

    ReplyDelete
  39. The provided information’s are very useful to me.Thanks for sharing.Keep updating your blog...
    Android Training Institute in Madipakkam

    ReplyDelete
  40. Very informative blog. Thanks for sharing such good information and keep on updating.
    Python Training Institute in Velachery

    ReplyDelete
  41. Your blog is really amazing with smart and cute content.keep updating such an excellent article..
    Best Microsoft Azure Training Institute in Chennai | Best Microsoft Azure Training Institute in Pallikaranai

    ReplyDelete
  42. This is really too useful and have more ideas from yours. keep sharing many techniques and thanks for sharing the information.
    Web Design Training in Chennai | Web Design Training in Velachery

    ReplyDelete
  43. Nice Post! It is really interesting to read from the beginning and Keep up the good work and continue sharing like this.
    Android Training Institute in Chennai | Android Training Institute in Velachery

    ReplyDelete
  44. Really it was an awesome article. Very useful & Informative..Thanks for sharing..
    Graphic Designing Training in Chennai | Graphic Designing Training in Velachery

    ReplyDelete
  45. very interesting topic.Helps to gain knowledge about lot of information. Thanks for posting information in this blog.
    Best Java J2EE Training Institute in Chennai | Best Java J2EE Training Institute in Taramani

    ReplyDelete