{{announcement.body}}
{{announcement.title}}

Custom Pipes in Angular

DZone 's Guide to

Custom Pipes in Angular

In this article, we discuss some basics behind custom pipes in Angular and how to implement them in your application.

· Web Dev Zone ·
Free Resource

A pipe takes in data as input and transforms it to a desired output.

There are various built-in pipes, such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, PercentPipe, etc.

See the below example of using built-in pipes in application

app.component.ts

TypeScript


app.component.html

TypeScript


Parameterizing a pipe:

A pipe can accept any number of optional parameters to format the input.

TypeScript


Chaining of pipes: 

We can chain multiple pipes together.

TypeScript


Now, we will see how we can write our first custom pipe

We are expecting a square of a number which we are giving as input to a pipe. Very simple scenario, right? Here’s the code that would go into a square-num.pipe.ts file inside of your app folder:

TypeScript


Then, we will include the custom pipe as a declaration in app.module.ts.

TypeScript


Finally, we can use pipe into our HTML file:

TypeScript


Thanks!!

Do not forget to share the points of improvement in the comments below. Happy learning!

Topics:
angular ,frontend ,pipes ,tutorial ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}