Why When to use OnPush 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 all components to see if they need updating.

This can slow down your app and make it feel laggy.

The Problem

Without optimization, Angular runs change detection on every component all the time, even if nothing changed in some parts.

This wastes time and computer power, making your app slower and less smooth.

The Solution

Using OnPush tells Angular to only check a component when its input data changes or an event happens inside it.

This way, Angular skips unnecessary checks and your app runs faster and smoother.

Before vs After

✗ Before

changeDetection: ChangeDetectionStrategy.Default

✓ After

changeDetection: ChangeDetectionStrategy.OnPush

What It Enables

OnPush enables your app to run efficiently by reducing unnecessary work, making it faster and more responsive.

Real Life Example

Think of a social media feed where only new posts or likes update the screen, instead of rechecking every post all the time.

Key Takeaways

Without OnPush, Angular checks all components often, slowing the app.

OnPush limits checks to when inputs change or events occur.

This improves app speed and user experience.