Angular Academy · Lesson

Pure vs Impure Pipes

Understand pipe change detection behavior.

Lesson 4 of 413 steps

Pure vs Impure Pipes is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

Pure Pipes by Default

Every pipe is pure by default. A pure pipe only re-runs when its input value or arguments change by reference.

Why Pure Pipes Are Fast

Angular skips calling a pure pipe during change detection if the input reference has not changed. This makes pure pipes efficient.

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

Reference vs Value Changes

Pure pipes detect reference changes. Mutating an array in place does NOT trigger a pure pipe, because the array reference stays the same.

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

Declaring an Impure Pipe

Set pure: false in the @Pipe decorator to make a pipe impure. An impure pipe runs on every change detection cycle.

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

When to Use Impure Pipes

Use impure pipes when the transformation depends on mutable data, like filtering an array that you mutate in place, or on values that change without a new reference.

The Cost of Impure Pipes

Impure pipes run very frequently, on every change detection cycle. Heavy logic inside them can hurt performance, so keep them lightweight.

The async Pipe Is Impure

The built-in async pipe is impure. It subscribes to an Observable or Promise and updates the view as new values arrive.

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

async Pipe Auto-Unsubscribes

A big benefit of the async pipe is automatic unsubscription when the component is destroyed, preventing memory leaks.

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

Avoid Mutation with Pure Pipes

To keep pure pipes working with collections, treat data as immutable: create new arrays and objects instead of mutating existing ones.

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

Choosing Pure vs Impure

Prefer pure pipes for predictable, fast behavior. Reach for impure only when you truly need to react to mutations. Often a redesign with immutable data avoids impure pipes entirely.

Impure Pipe Best Practices

If you must use an impure pipe, memoize results so you do not recompute when inputs are unchanged.

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

Quick Check

Test your understanding of pure and impure pipes.

Answer it in the interactive lesson

Recap

Pure pipes run only on reference changes and are fast; impure pipes (pure: false) run every cycle and suit mutable data. The async pipe is impure and auto-unsubscribes.

Favor immutable data so pure pipes stay efficient.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Pure vs Impure Pipes” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Pure vs Impure Pipes”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “Pure vs Impure Pipes”?

Understand pipe change detection behavior. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “Pure vs Impure Pipes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy