Last Updated : 23 Jul, 2025
In this article, we will learn about Pure and Impure pipes in Angular. We will also explore how Angular handles both types of pipes with an example.
What are Angular Pipes?
Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. Pipes are simple functions that accept an input and return a transformed value in a more technical understanding. They do not alter the data but change into the required format to display in the browser. Angular provides many built-in pipes for typical data transformation. You can also create custom pipes if you want to do custom transformations.
Angular Pipes Angular PipesFeatures:
Example: We will use a built-in pipe uppercase that transforms text to all upper cases.
JavaScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `{{ title | uppercase}}`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'pipes in angular';
}
Output:
Pure and Impure Pipes: In Angular, Pipes are of two types.
Pure Pipes:
<div> {{ user | myPipe }} </div>
JavaScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = { name:'Rohit', age: 23};
}
here, user is an object and myPipe is a custom Pipe.
function add(a, b){
return a + b
}
@Pipe({
name: 'purePipe',
pure: true
})
export class PurePipe {}
Impure Pipes:
<div> {{ user | myPipe }} </div>
JavaScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = { name:'Rohit', age: 23};
}
JavaScript
@Pipe({
name: 'myPipe',
pure: false
})
export class MyPipe {...}
var discount = 15
function calculateAmount(price){
return total + (price - discount);
}
How Angular Handles Pure and Impure Pipes: The following diagram describes how angular handles Pure and Impure pipes.
How pure and impure pipes are handled by angularPure and Impure Pipes Example: In this example, we will create an Angular app to display employees' data. We will create a custom pipe to understand the working of pure and impure pipes. The button "Add Employee" is used to add an employee to the list and "Reset" is used to clear the textbox.
Custom pipe (search.pipe.ts)
JavaScript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(value: any, name: string) {
if(name === ''){
return value;
}
return value.filter((employee) => {
employee.firstName.startsWith(name)
});
}
}
search pipe is used to filter the list based on the text added in the input box.
Component class (app.component.ts)
JavaScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nameString = '';
employees = [{
firstName: 'Rohit',
lastName: 'Sharma',
dept: 'Finance',
salary: 5000,
doj: new Date('2012-04-22')
},
{
firstName: 'Aditi',
lastName: 'Mishra',
dept: 'Sales',
salary: 6000,
doj: new Date('2016-09-16')
},
{
firstName: 'Dipti',
lastName: 'Singh',
dept: 'IT',
salary: 10000,
doj: new Date('2021-09-03')
}
]
addUser(){
this.employees.push({
firstName: 'Rahul',
lastName: 'Yadav',
dept: 'HR',
salary: 8000,
doj: new Date('2016-11-19')
})
}
reset(){
this.employees = this.employees.slice()
}
}
In the component class, there is an array employees
for storing employees data. The function addUser()
is used to add employees in the list.
Template (app.component.html)
HTML
<div class="container">
<h1>Employee Details</h1>
<span>Search </span>
<input type="text" [(ngModel)]="nameString">
<br/><br/>
<table class="table table-sm table-striped m-t-4">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Department</th>
<th>Salary</th>
<th>Joining Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees | search:nameString">
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.dept}}</td>
<td>{{employee.salary | currency}}</td>
<td>{{employee.doj | date:'dd/MM/yyyy'}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-success m-3"
(click)="addUser()">
Add Employee
</button>
<button type="button" class="btn btn-success"
(click)="reset()">
Reset
</button>
</div>
Output: The output below shows the working search pipe in the Angular app.
Now, let's explore the pure and impure pipe working in our app. Now we will try to add an employee while we are filtering the data. By default, custom pipes are pure pipes. Therefore, the below output is an example of a pure pipe.
Here, We try to add an employee having the first name with the same starting letter to check if it
appears in the filtered data.
The filtered list doesn't update on clicking the Add Employee button because pure pipe ignores changes within objects. The filtered list is updated by clicking the Reset button because it changes the array reference.
If we use impure pipes, the change will be reflected by just clicking the Add Employee button. Impure pipes now detect change within objects. Let's see how it is implemented.
JavaScript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search',
pure: false
})
export class SearchPipe implements PipeTransform {
transform(value: any, name: string) {
if(name === ''){
return value;
}
return value.filter((employee) => {
employee.firstName.startsWith(name)
});
}
}
Difference between Pure and Impure pipes Pure pipe Impure pipe The pipe is executed only when it detects a change in primitive value or object reference The pipe is executed on every change detection cycle irrespective of the change in the input value. A single instance is created. Multiple instances are created It uses pure function It uses an impure function Pure pipe optimizes application performances. Impure pipe may slow down your application
Conclusion:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4