Pipes in Angular

Posted By : Ekta Bhadauriya | 28-Dec-2020

A pipe is a useful feature in Angular and a simple way to transform values in a template. There are some built-in pipes, but you can also create your own pipes. A pipe accepts an input value and returns a transformed value. Through pipe, you can transform strings, currency amounts, dates, and other data for display. The fact that you can use pipes throughout your application while declaring each pipe once, makes them very useful.  

 

Angular provides some built-in pipes for data transformations, including transformations, which use locale information to format data. The following are some commonly used built-in pipes for data formatting:


DatePipe: To formats a date value according to locale rules.
UpperCasePipe: To transforms text to all upper case.
LowerCasePipe: To transforms text to all lower case.
CurrencyPipe: To transforms a number into a currency string, formatted according to locale rules.
DecimalPipe: To transforms a number into a string with a decimal point, formatted according to locale rules.
PercentPipe: To transforms a number into a percentage string, formatted according to locale rules.

 

In addition to the above types, you can create and use custom pipes in template expressions.

 

Also Read: Building a Redux Application Using Angular


Using a pipe in a template

 

To use a pipe, use the pipe operator (|)  in the template expression as shown in the following example with the name of the pipe, which is date for the built-in DatePipe. The example show the following:

 

<p>Birthday is {{ birthday | date }}</p>
<p>Birthday is {{ birthday | date:"MM/dd/yy" }} </p>

 

Applying two formats by chaining pipes

 

To apply two formats we can chain pipes so that the output of one pipe becomes the input to the next

 

Birthday is {{ birthday | date | uppercase}}

 

Also Read: Overview Of Angular version 10

 

Creating pipes for custom data transformations


If there are transformations void of built-in pipes, we can create custom pipes for transformations. As we use built-in pipes to transform input values to output values for display, the same way we can use custom pipes in template expressions. Here's the syntax to define a custom pipe:

 

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

 

We are a 360-degree software development company that provides complete web and mobile app development solutions for varied project requirements. Our end-to-end SaaS app development services address your mission-critical project requirements through scalable, responsive, and feature-rich software applications that are easy to scale. We carefully analyze your project requirements and formulate effective strategies to build enterprise-grade web and mobile applications for multiple platforms. For more info, contact us at [email protected]

About Author

Author Image
Ekta Bhadauriya

Ekta stands out as a highly accomplished Frontend Developer, specializing in Angular technology. In addition to her mastery of Angular, she possesses a comprehensive understanding of various programming languages and tools, including HTML, CSS, JavaScript, AMP, and Git. Ekta has made significant and noteworthy contributions to several internal projects, such as the Oodles Dashboard, Careers Frontend, and Oodles.com. Her expertise and skills have played a pivotal role in the success of these projects.

Request for Proposal

Name is required

Comment is required

Sending message..