Why OnPush change detection strategy in Angular? - Purpose & Use Cases

The Big Idea

Discover how a simple setting can make your Angular app feel lightning fast!

The Scenario

Imagine you have a big Angular app with many components, and every time something changes anywhere, Angular checks every component to see if it needs to update the screen.

This can feel like having to check every single light bulb in a huge building every time you flip a switch, even if only one room needs light.

The Problem

This default way is slow and wastes time because Angular runs checks on all components, even those that didn't change.

It can make your app feel sluggish and use more battery or CPU than needed.

The Solution

The OnPush change detection strategy tells Angular to only check a component when its input data changes or when you trigger an event inside it.

This is like only checking the rooms where someone flipped the switch, making updates faster and more efficient.

Before vs After

✗ Before

changeDetection: ChangeDetectionStrategy.Default

✓ After

changeDetection: ChangeDetectionStrategy.OnPush

What It Enables

It enables your app to run faster and smoother by reducing unnecessary work and focusing only on what really changed.

Real Life Example

Think of a social media feed where only the posts you interact with update, instead of the entire feed refreshing every time you scroll.

Key Takeaways

Default change detection checks all components on every change.

OnPush checks only when inputs change or events happen inside the component.

This makes apps faster and more efficient.