Angular Academy · Lesson

Pure vs Impure Pipes

Understand pipe change detection behavior.

Pure vs Impure Pipes is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

Is the “Pure vs Impure Pipes” lesson free?

Yes — the full text of “Pure vs Impure Pipes” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

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