What are Pipes in Angular - Pure & Impure Pipe in Angular (With Example

What are Pipes in Angular - Pure & Impure Pipe in Angular (With Example

17 Jul 2025
Intermediate
16.3K Views
20 min read
Learn with an interactive course and practical hands-on labs

Angular Course Free with Certificate - Beginner Level

Angular pipes transform and format data directly within your templates. They provide a practical means of organizing, screening, and modifying data before its presentation to consumers.

In today's Angular Tutorials, you will explore types of pipes in Angular including built-in pipes, Pure and impure pipes in Angular, and Custom pipes in Angular more on. Let’s dive in — because developers who don’t know pipes are already falling behind.

Exploring Pipes in Angular

What are Pipes in Angular?

Pipes are functions in Angular that take in input data and provide altered output data. The pipe() function in Angular is used to chain multiple operators together to transform data. They can be used to filter and sort arrays and format dates, integers, strings, and other kinds of data within template expressions. Pipes improve the presentation layer of Angular applications and make data handling easier.

Pipes in Angular

Syntax of the pipe() function

Pipes are denoted by a vertical bar ( | ) followed by the pipe's name.
Syntax: {{ value | pipe1| pipe2 | …..| pipeN }}
Here,
  • value: The input value to be transformed.
  • pipe1…..pipeN: Operators or transforms to be applied to the input value.
A simple example of a pipe would be:
Import {Component } from '@angular/core';
@Component({
 selector: 'app-root',
 template: `<h2>Her birth date is {{ birthdate | date }}</h2>`
 })
 export class AppComponent {
 birthdate = new Date(1996, 5, 5);
 }

In the above example, we have used a pipe operator on the birthdate by interpolation. Here, we used the Date pipe function on the right.

 pipe operator on the birthdate by interpolation

Features of pipes in Angular

pipes in angular

  • Transforms Data Easily: Pipes format data directly in templates, like dates, currencies, or strings.
  • Supports Chaining: Multiple pipes can be combined for cleaner and more powerful data presentation.
  • Allows Custom Pipes: Developers can create custom pipes for specific formatting or filtering needs.
  • Pure & Impure Pipe Support: Use pure pipes for performance or impure ones for dynamic, frequently changing data.
  • Auto Memory Management with Async Pipe: async pipe handles subscription/unsubscription automatically for Observables and Promises.

Types of Pipes in Angular

There are different types of angular pipes:

  • Built-in Pipes,
  • Pure and Impure Pipes
  • Custom Pipe

1. Built-in Pipes

Angular provides various built-in pipes that can be used typically for data transformations, including currency, decimal, upper and lower case along with transformations for internationalization, which use locale information to format data. The following are commonly used built-in pipes for data formatting:

  1. Currency Pipe
  2. Date Pipe
  3. Json Pipe
  4. LowerCase Pipe
  5. UpperCase Pipe
  6. PercentPipe
  7. SlicePipe
  8. TitleCasePipe
  9. AsyncPipe

Let us see some of them next.

1. Slice - used for a list or a string to be sliced.

{{ value_expression | slice : start : end }}

Some of the parameters used with this pipe function are:

  • start (the starting index of the subset to return)
  • end (the ending index of the subset to return)

2. UpperCase -Transforms text to upper case format.

 {{ value_expression | uppercase }}

3. Currency - Transforms a number to a currency string

 {{ value_expression | currency }}

Some of the parameters used with this pipe function are :

  • currencyCode
  • display
  • digitsinfo
  • locale

4. JSON - Converts a value into its JSON-format representation

{{ value_expression | json }}

Percent - The Percent pipe is used to transform the percent number into a well-formatted string as given below

{{ 0.295 | percent }}

Table showing user-built-in pipes

Pipe NameDescription
DatePipeFormats a date value
UpperCasePipeConverts a string to uppercase
LowerCasePipeConverts string to lowercase
CurrencyPipeTransforms number to currency format
DecimalPipeFormats numbers with decimals
PercentPipeTransforms number to percentage
JsonPipeConverts object to JSON string
SlicePipeSlices a list or string
AsyncPipeSubscribes to Observables or Promises
2. Pure and Impure Pipes

In Angular, pipes can be either pure or impure. Understanding this distinction is crucial for writing optimized and reactive Angular applications. Pure pipes are executed when there is a change to the primitive input value or the object reference is changed, whereas Impure pipes are executed during every angular component change detection cycle. (Change Detection is a vast concept in itself, which is out of the scope of this article).

What is a Pure Pipe?

A pure pipe in Angular is a pipe that executes only when it detects a change in its input data. Angular automatically considers all pipes to be pure unless explicitly marked otherwise. Pure pipes are ideal for scenarios where the input data is immutable or changes infrequently.

Key Characteristics:

  1. Stateless: Output depends solely on the input values.
  2. Executes only when input value or reference changes.
  3. Offers better performance and efficiency.
  4. Suitable for formatting, transformation, and static computations.

Example:

{{'angular' | uppercase}}

Here, Angular runs the uppercase pipe only if the string changes, making it highly efficient.

What is an Impure Pipe?

An impure pipe in Angular is a pipe that executes on every change detection cycle, regardless of whether its inputs have changed. Impure pipes are manually declared by setting the pure property to false in the pipe decorator.

These pipes are necessary when working with mutable data structures like objects or arrays that are updated without changing their reference.

Key Characteristics:

  1. Stateful or context-sensitive.
  2. Re-evaluated frequently during the app’s lifecycle.
  3. Can negatively impact performance if not used carefully.
  4. Useful when working with live data updates or non-primitive values.

Example :

impure-uppercase.pipe.ts


import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'impureUppercase',
  pure: false // Marked as impure
})
export class ImpureUppercasePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Explanation: 

  • Pipe name: impureUppercase
  • What it does: Converts a string to uppercase.
An impure pipe re-runs on every keystroke because Angular checks it on every change detection cycle.
Some interesting examples of Impure Pipes are:
  • AsyncPipe (used with Observables)
  • CachingPipe (used to make HTTP requests) 
Difference between Pure Pipe and Impure Pipe
FeaturePure pipeImpure Pipe
DefinitionExecutes only when input changesExecutes on every change detection cycle.
PerformanceFast and efficientSlower if used excessively
Use CaseStatic data /Immutable dataDynamic or mutable data
Default BehaviorYes (all pipes are pure by default)No (must explicitly set pure: false)
Change DetectionOptimizedTriggered frequently

Chaining of pipes

Angular also provides us the feature to use two or more pipe functions together in a useful combination. This process is known as the Chaining of pipes.

{{ birthdate | date | lowercase}}

We can also parameterize pipes using the ":" after the pipe function like:

date: 'fullDate' or {{ num | percent [ : digitsInfo ] }}

3. Custom Pipes

Custom pipes are used to transform the data in an Angular application. Custom pipes allow you to create your own transformation logic that can be reused in templates.
Example
use case: {{ longText | truncate:50 }}
  • trancates long text to 50 characters.

Creating Custom Pipes

Another interesting concept with pipes in Angular is that we can create our very own custom pipes and enhance the working of our data. Steps Involved In Creating a Custom Pipe In Angular are: 

  1. Create a Pipe Class and decorate it with the decorator @Pipe.
  2. Supply a name property to be used as a template code name.
  3. Register your Pipe in the module under declarations.
  4. Finally, implement PipeTransform and write transformation logic.
  5. Use your pipe in the HTML using ‘|’, which represents a pipe.
  6. Also, add Custom arguments if you want to.
import { Pipe } from '@angular/core';

 @Pipe({
 name: 'demo'
 })
 export class DemoPipe{ }

Once we are done creating the Pipe class, we go to app.module.ts and register our pipe.

import { DemoPipe } from './demo.pipe';

 @NgModule({
 declarations: [
 DemoPipe
 ],
 imports: [
 BrowserModule
 ],

To finally put some logic behind the task of our custom pipe, we use PipeTransform.

import { Pipe, PipeTransform } from '@angular/core';

 @Pipe({
 name: 'demo'
 })
 export class DemoPipe implements PipeTransform{
 transform(n: number) {}
 }

So, to maintain the required standard structure, we use the transform() method inside PipeTransform.Now, our motive is to convert some random number to a readable format of kilograms, and to do that, we put logic inside transform() as follows

import { Pipe, PipeTransform } from '@angular/core';

 @Pipe({
 name: 'demo'
 })
 export class DemoPipe implements PipeTransform{
 transform() : string {
 return (n *1000).toFixed(2) + 'Kg';
 }
 }

Now to use it in the HTML,

 <div>
 <p>{{ demo.name }}</p>
 <p>{{ demo.n | demo }}</p>
 </div>

To add a custom argument to your output, simply add the capability of extension to the Transform() method as follows.

import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
 name: 'demo'
 })
 export class DemoPipe implements PipeTransform{
 transform(n: number, extension: string = 'Kilograms') {
 return (n * 1000).toFixed(2) + extension;
 }
 }

This is how you can create a custom pipe for your own.

Best practices for using pipes

  • Make use of built-in pipes: To reduce overhead, make use of Angular's optimized built-in pipes, such as DatePipe, CurrencyPipe, and DecimalPipe.
  • Avoid excessive chaining: Limit pipe chaining to avoid performance issues, particularly when working with big datasets. Instead, think about data preprocessing or bespoke pipes.
  • Performance considerations: Minimise pipe calls and steer clear of complex computations inside them.
  • Maintain simple pipes: Keep pipelines simple and concentrate on single transformations to make debugging and maintenance easier.
  • Pure pipes are preferred: To improve performance, use pure pipes and only call them when the input changes.
  • Recognize the different data types: To guarantee proper behavior, be aware of the data types that various pipes demand.
  • Conduct a comprehensive test: Perform thorough testing, including component and unit testing, on custom pipelines to ensure functioning and integration.

Read More:

Summary

Pipes in Angular play a vital role in transforming data within templates before displaying it to the user. From using built-in pipes like DatePipe, CurrencyPipe, and PercentPipe to implementing custom pipes tailored to your application’s needs, pipes help keep your code clean, reusable, and maintainable. Understanding the difference between pure and impure pipes further empowers developers to optimize performance and update behavior based on specific use cases.

If you're looking to validate your knowledge and boost your resume, consider pursuing an Angular certification that includes modules on pipes, components, services, and RxJS.

FAQs

The pipe transform method's primary function is to change one value into another. The value may simultaneously be an integer, string, object, or array, among other data types. To carry out the required action, you can design your custom pipes in the angular cli.

Pipes allow us to customize how objects in component templates are rendered. A few built-in pipes in Angular allow us to render string and integer data in a format that is specific to a given locale. Additionally, pipes can be used to retrieve values returned from promises and observables as well as to obtain a slice of arrays or strings.

As demonstrated in the code example below, use the pipe operator (|) in a template expression to apply a pipe. The pipe operator (|) transfers the birthday value of the component to the DatePipe, whose pipe name is the date. The date is rendered by the pipe as April 15, 1988, in the default format. Examine the component class.

Take our Angular skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Share Article
About Author
Nishu Goel (Angular developer, Author, and Speaker)

Nishu is an Angular developer, Author, and Speaker. She is working as a Developer at IBM with her major interest in technologies and frameworks like Angular, JavaScript, CSS. She also works towards achieving the SDGs by United Nations, by applying technology towards better livelihood. Her hobbies include blogging about the latest technologies and creating a better ecosystem for students.
Live Training - Book Free Demo
.NET Solution Architect Certification Training
24 Aug
10:00AM - 12:00PM IST
Checkmark Icon
Get Job-Ready
Certification
Software Architecture and Design Training
24 Aug
10:00AM - 12:00PM IST
Checkmark Icon
Get Job-Ready
Certification
Azure AI & Gen AI Engineer Certification Training Program
28 Aug
08:30PM - 10:30PM IST
Checkmark Icon
Get Job-Ready
Certification
Advanced Full-Stack .NET Developer with Gen AI Certification Training
31 Aug
08:30PM - 10:30PM IST
Checkmark Icon
Get Job-Ready
Certification
ASP.NET Core Certification Training
31 Aug
08:30PM - 10:30PM IST
Checkmark Icon
Get Job-Ready
Certification
Accept cookies & close this