What is PIPE in Angular? use of PIPE in angular?

Saravanan Np

7y1.2kAngular

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Munesh Sharma7y ago
https://www.c-sharpcorner.com/article/pipes-in-angular-6/
Rajeesh Menoth7y ago
Hi,

Pipe is nothing but it is formatting or transformig the data. You can refer my Angular currency article as one of the example for Pipe.

Reference :

https://www.c-sharpcorner.com/article/pipes-in-angular-6/

https://www.c-sharpcorner.com/article/currency-filter-in-angular-js/
Salman Beg7y ago
Pipes is a built-in logic[class] to transform data into required format.
Pipes is similar to filters in angularjs
Types of Pipes:-
------------------
1/ UpperCase Pipe
2/ LowerCase Pipe
3/ Number Pipe
4/ Currency Pipe
5/ Percent Pipe
6/ Date Pipe
Even if we can Create and use our Custom Pipes.
Follow these articles, for more,
https://dotnet2developer.blogspot.com/2018/05/pipes-in-angular-2.html
https://dotnet2developer.blogspot.com/2018/05/custom-pipes-in-angular-2.html

Thanks.
Jignesh Kumar7y ago
Hi,

Pipe in Angular,

https://www.tutorialspoint.com/angular4/angular4_pipes.htm

usage of Pipe:
https://www.lucidchart.com/techblog/2017/11/08/5-usage-ideas-for-angular-pipes/
Puneet Kankar7y ago
Pipe is use for transform data based onrequirement by using | symbol like. Lowercasepipe Uppercasepipe Datepipe Currencypipe Jsonpipe Percentpipe Decimalpipe Slicepipe
Sreekanth Reddy7y ago
Hi Saravanan,

Pipes are used to format the data.
Formatting the data means :
Let us think that we got the data of gender as 0 and 1 from backend/via service.
But the user wants to see it as 0 as "Male" and 1 as "Female".
So, in this situations we choose PIPES in angular2+ versions.
Another example:
If the end user want to see true as "Yes" and false as "No". This is also formatting.
Another way of formatting :
Increment the salary of employees with 5000 and display.
So all the above are the scenarios of formatting the data.
In that situations we have to choose the custom "PIPES" concept.
We are also having built in pipes like currency,date,upper case,lower case... & so on.

For more about PIPES :
https://angular.io/guide/pipes

Accept the answer, If it helps.
Thank you.
Sanwar Ranwa7y ago
Hello Saravanan

Pipes are used to format the data before displaying in the View. Pipe is used by using |. This symbol is called a Pipe Operator.

Types of pre-defined or built-in pipes in Angular 6.

Lowercase

Uppercase

Titlecase

Slice

Json Pipe

Number Pipe

Percent Pipe

Currency Pipe

Date Pipe

Please check these Links for more details

https://www.c-sharpcorner.com/article/pipes-in-angular-6/

https://www.lucidchart.com/techblog/2017/11/08/5-usage-ideas-for-angular-pipes/

https://angular.io/guide/pipes