Pure vs impure pipes in Angular - When to Use Which

The Big Idea

Discover how a simple choice in pipes can make your Angular app faster and smoother!

The Scenario

Imagine you have a list of items that updates often, and you want to transform or filter this list in your Angular template manually every time the data changes.

The Problem

Manually updating or recalculating transformations on every change is slow and error-prone. It can cause unnecessary work and make your app lag or behave unpredictably.

The Solution

Pure and impure pipes let Angular handle these transformations efficiently. Pure pipes run only when inputs change, while impure pipes run on every change detection, giving you control over performance and updates.

Before vs After

✗ Before

filteredList = filterItems(items); // called manually on every change

✓ After

<div *ngFor="let item of items | customPipe">{{ item }}</div>

What It Enables

This lets you write clean templates that update automatically and efficiently without extra manual work.

Real Life Example

Showing a filtered product list that updates only when the product data changes, not on every user interaction or timer tick.

Key Takeaways

Pure pipes run only when inputs change, improving performance.

Impure pipes run on every change detection, useful for dynamic data.

Choosing the right pipe type helps balance app speed and responsiveness.