Pure vs impure pipes in Angular - Hands-On Comparison

Pure vs Impure Pipes in Angular

📖 Scenario: You are building a simple Angular app that shows a list of fruits. You want to learn how Angular pipes work, especially the difference between pure and impure pipes.Pure pipes run only when the input changes by reference. Impure pipes run on every change detection cycle, even if the input reference is the same.

🎯 Goal: Create an Angular component that displays a list of fruits. Use a custom pipe to transform the list. First, create a pure pipe that filters fruits by a minimum length. Then, create an impure pipe that also filters fruits but updates even if the list reference does not change.

📋 What You'll Learn

Create a component with a fruits array

Create a pure pipe called filterPure that filters fruits by minimum length

Create an impure pipe called filterImpure that filters fruits by minimum length and is marked impure

Display the filtered fruits using both pipes in the template

💡 Why This Matters

🌍 Real World

Filtering and transforming data in Angular templates is common in real apps, like showing filtered product lists or formatted user data.

💼 Career

Understanding pure vs impure pipes helps write efficient Angular apps and avoid unnecessary UI updates, a key skill for frontend developers.

1

Set up the fruits array in the component

In the Angular component class, create a public array called fruits with these exact values: 'apple', 'banana', 'cherry', 'date', 'elderberry'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-fruit-list',
  templateUrl: './fruit-list.component.html',
  styleUrls: ['./fruit-list.component.css']
})
export class FruitListComponent {
  // Create the fruits array here
}

Need a hint?

Define a public property named fruits and assign the array with the exact fruit names.

2

Create a pure pipe to filter fruits by minimum length

Create a pure Angular pipe named filterPure. It should take an array of strings and a number minLength. Return a new array containing only fruits with length greater than or equal to minLength. The pipe must be pure (default).

Angular

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

@Component({
  selector: 'app-fruit-list',
  templateUrl: './fruit-list.component.html',
  styleUrls: ['./fruit-list.component.css']
})
export class FruitListComponent {
  fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
}

// Create the pure pipe filterPure here

Need a hint?

Use @Pipe decorator with name: 'filterPure'. Implement PipeTransform interface and write the transform method to filter fruits by length.

3

Create an impure pipe to filter fruits by minimum length

Create an Angular pipe named filterImpure that filters fruits by minimum length like filterPure. Mark this pipe as pure: false in the @Pipe decorator to make it impure.

Angular

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

@Component({
  selector: 'app-fruit-list',
  templateUrl: './fruit-list.component.html',
  styleUrls: ['./fruit-list.component.css']
})
export class FruitListComponent {
  fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
}

@Pipe({
  name: 'filterPure'
})
export class FilterPurePipe implements PipeTransform {
  transform(items: string[], minLength: number): string[] {
    return items.filter(item => item.length >= minLength);
  }
}

// Create the impure pipe filterImpure here

Need a hint?

Use @Pipe decorator with name: 'filterImpure' and pure: false. Implement PipeTransform and write the transform method similarly to the pure pipe.

4

Use both pipes in the component template

In the component template, display two lists of fruits. Use the filterPure pipe with minLength = 6 to show fruits with length 6 or more. Below it, use the filterImpure pipe with the same minLength. Use *ngFor with let fruit of fruits | filterPure:6 and let fruit of fruits | filterImpure:6 respectively.

Angular

Need a hint?

Use *ngFor directive with the pipes and minLength value 6 to show filtered fruits in separate lists.