Built-in pipes in Angular JS

Introduction:

Angular JS is trending client side framework for building real time and light weight web applications. One of the best feature in Angular JS is pipes concept. Which will come in handy to achieve the transformation of text, currency and on numeric manipulations on data.

Basic Requirement :

To understand this you should be beginners or intermediate in Angular JS, HTML, CSS and basic JavaScript coding knowledge needed.

Built-in pipes:

  1. UpperCasePipe
  2. LowerCasePipe
  3. CurrencyPipe
  4. DatePipe

Above mentioned all are build in pipes from Angular, which are comes very handy to achieve quick transformations. Let us see one by one with simple example.

All pipes should be mentioned or marked in-front of component properties to achieve required transformation on incoming data.

Pipes will take parameter to provide extra functionality those parameters are called ‘Parameter Pipes’. These pipes will take parameters which are optional and will extra customization for your pipes.

Upper case Pipe: 

it’s name only self exploratory which says transforming text to upper case.   Which comes very handy when ever a user case need to transfer data to upper case in real time.

Lower case Pipe:

it’s name only self exploratory which says transforming text to lower case.   Which comes very handy when ever a user case need to transfer data to lower case in real time and while comparing  two string elements in lower case if the input data is in lower case.

Currency Pipe:

As name suggests, if you need to render your data with currency symbols, which will come in handy.

As explained above- you can pass some optional parameters to this pipe to customize the look and feel of the currency symbol. Like we need to Australia dollars then you can pass ‘AUD’ and how many decimal places need. Refer the example mentioned below.

Date Pipe:

When ever date renders from the server to client – which is not in human readable format. With data pipe you can customize the look and feel of date formats.

This pipe also takes the optional parameters which intern gives flexibility to customize the date formats. Example if you want to show 22nd Jan 2017 then you can use the toShortDate function.

Code piece :: Example:: I have show examples for above mentioned  4 built in angular pipes. Here I have created simple component for example purpose and I used some properties to match for all pipes.

In template section, I used them and after running the application – you can see customized text transformation using pipes.

template :`
{{title | uppercase | lowercase}} <br/>
{{students | number}} <br/>
{{rating | number : ‘2.1-1’}} <br/>
{{price | currency : ‘AUD’:true:’3.2-2′}} <br/>
{{releaseDate | date:’shortDate’}} <br/>
`
Example :: Template code to demonstrate the build in angular pipes.
Conclusion: As we seen – angular provider lot of customization on text or data transformation by providing in built pipes. You can create your own pipes to achieve your user case using ‘Angular Custom Pipes’ concept. Thanks.
Happy coding 🙂