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:"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
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].
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.