Introduction of Pipes in angular 8

Pipes are just simple functions that you can use to transfer your input data to desired output before displaying it in a browser. Angular provides a built-in pipe or ability to create custom pipes that allows us to change the data or formatting the data in angular or it provides helpful features to change the data of a template, i.e., Ordering, Formatting, Numbers, Dates, Currencies.

Example : {{Input | Filter}} = Output

{{‘Angular’ | uppercase}} = ANGULAR

Input – Angular

Filter – uppercase

Output -- ANGULAR

Types of pipes in angular:

Built-In Pipe.

There are several pipes available in angular framework to use such as

• DatePipe
• UpperCasePipe
• LowerCasePipe
• CurrencyPipe
• DecimalPipe
• PercentPipe
• Custom Pipe

You can also create your own pipes based on your requirement that will do custom transformations using your custom pipes in template expressions.

PRE-REQUISITES

To use pipe in your code, you need to have basic understanding of following:

Components

HTML5 and Typescript programming

HOW TO USE PIPE

Pipe operator’s syntax is ‘|’ that can be used within template expression to display desired output in browser along with the name of the pipe, which is date for the built-in DatePipe in below example :

e.g.=>

today : Date = new Date();

<p>Datetime as object – {{today}}

date_output:{{today | date}} </p>

OUTPUT

Datetime as object – Mon Sep 01 2020 21:10:09 GMT+0530(Indian Standard Time)

Date_output:Sep 01, 2020

Pipe with parameter

You can also use optional parameters along with pipe. For example- currency pipe has an optional parameter EUR which basically transforms the amount to currency in euros.

Pipe name currency with a colon(:) and the parameter value {‘EUR’}

Ex- {{amount | currency:’EUR}

If you need to use multiple parameters with a pipe, you can do like this –

{{amount | currency: ‘EUR’:’Euros’}}

Moreover, for some pipes one parameter is mandatory to pass and allow more optional parameters.

Pipes Chaining

You can do chaining of pipes also in which an output of one pipe will become an input to the next pipe. Ex- Pipe a date value as an input to date pipe which results in a formatted date that further pipe to uppercase pipe as an input which converts into uppercase characters.

Benefits of using pipe

• Pipes help you to keep your templates clean because you don't use functions, parameters etc.
• Unlike functions, it runs only when input is changed (cached results).

We, at Oodles ERP, provide end-to-end ERP software development services to solve complex business problems through automated software solutions. Our developers use agile methodologies and open-source platforms to provide a hassle-free development experience at reduced costs. For more information, contact us at [email protected]