ANGULAR PIPES

Angular Pipes are the new style version of filters consists of functions used to format values used inside the HTML template. In Angular 1 Pipes are known as filters. There are so many built-in pipes available in Angular which we can directly use in our Angular applications. 

For example in the current world applications, we want to display values, such as tomorrow, today, and so on and not system date formats such as October 11, 2020, 18:00.

How to define a Pipe?

The pipe operator is implemented with the symbol | followed by the pipe name

{{  variable_name  |  pipename  }}

The below example will show simple lower case pipe

{{"Harikrishnan R"  |  lowercase}}

The output for the above code is harikrishnan r.

Built-in Pipes

DecimalPipe

DecimalPipe will allow us to format numbers which are according to local rules. DecimalPipe will be used to transform the number of different formats.

The general syntax will be the following:

variable_name  |  number  [:digitInfo]

example will be follwos:

import  {  Component  }  from  '@angular/core';

@Component({

template:  `

state_tax  (.1-7):  {{state_tax  |  number:'.1-7'}}

state_tax  (2.10-10):  {{state_tax  |  number:'2.3-3'}}

`,

})

export  class  PipeComponent  {

state_tax:  number  =  5.1445;

}

Date Pipe

In the name itself, we can understand the use of this pipe, it allows us to format or transform the values that are related to date. Date Pipe can also be used in the form of values in different formats based on the parameters passed at the run time.

The general syntax is below

{{ today  |  date }}  //  prints  today's  date  and  time

{{  today  |  date:’dd-MM-yyyy'  }}  //prints  only  Month  days  and  year

{{  today  |  date:'medium'  }}

{{  today  |  date:'shortTime'  }}  //  prints  short  format

CurrencyPipe

The CurrencyPipe operator will be used to attach the currency symbol or country codes in front of the number of values.

The syntax is below

{{  value  |  currency:'USD'  }}

Example is as follows

{{  expenses  |  currency:'INR'  }}

LowercasePipe and UppercasePipe

The LowercasePipe and UppercasePipe, as per the name itself we can understand which is used for transforming the text into lowercase and uppercase.

The syntax is below

{{ variable_name  |  lowercase  }}

{{ variable_name  |  uppercase  }}

An example is as follows

{{ Harikrishnan  |  lowercase  }} // Output is harikrishnan

{{ Harikrishnan  |  uppercase  }} // Output is HARIKRISHNAN

JSON Pipe

Here we were transforming the strings; using JSON Pipe, we will be transformed and displaying the string into a JSON format string.

The syntax is as follows

{{  variable_obj  |  json  }}

SlicePipe

Slice Pipe is mostly similar to the array slice function in JavaScript. Which will gets a substring from a  certain start and end positions.

The general syntax is given as follows:

{{emailAddress  |  slice:0:4  }}

I hope you are now aware of the built-in pipes available in Angular