Angular’s change detection is one of its most powerful features — but also one of the most misunderstood, especially when it comes to ChangeDetectionStrategy.OnPush. If you’re a beginner wondering why your component isn’t updating the way you expect, this article is for you.
✅ What is ChangeDetectionStrategy.OnPush?
By default, Angular checks every component in the app whenever any data might have changed. This is safe, but not very efficient.
With ChangeDetectionStrategy.OnPush, Angular becomes smarter. It only updates the component when:
-
An
@Input()gets a new object (new reference) -
An event (like a click) happens inside the component
-
You manually tell Angular to check (using
ChangeDetectorRef.detectChanges())
This can greatly boost performance, especially in apps with large lists or many nested components.
⚠️ Common Misconceptions (And What’s Actually True)
❌ 1. “If I change a property in an input object, the view will update.”
✅ Truth: Angular with OnPush only updates when you replace the whole object.
❌ 2. “Any change in the parent will update the child.”
✅ Truth: The child with OnPush only updates if:
-
It receives a new input object
-
Or an event happens inside it
❌ 3. “An event in the parent will update the child.”
✅ Truth: Not unless the parent gives the child a new input.
Even if the parent changes the data, the child won’t update unless Angular sees the input reference has changed.
❌ 4. “OnPush freezes my component.”
✅ Truth: OnPush just makes change detection more selective. Your component can still update — but only when one of the valid triggers happens.
❌ 5. “OnPush is too advanced for beginners.”
✅ Truth: You can use it in simple list components, card components, or anything that just displays data. It’s a great way to learn clean patterns like immutable data and pure components early on.
🛠️ A Simple Example
🎯 When Should You Use OnPush?
-
When your component is pure (renders only based on
@Input()). -
When you use immutable data (create new objects instead of mutating).
-
When performance matters (e.g., long lists, nested views).
-
When you want more control over when updates happen.
📌 Pro Tips for Beginners
-
✅ Always pass new objects to
@Input()when you want updates. -
✅ Handle internal events (clicks, form changes) inside the component.
-
✅ Use
ChangeDetectorRef.detectChanges()only when needed. -
❌ Avoid mutating data directly if using
OnPush.
🔚 Conclusion
ChangeDetectionStrategy.OnPush is not something to be feared — it’s a tool that gives you control and speed. The key is understanding when Angular detects changes and how to structure your code to match that.
By avoiding the common misunderstandings above, you’ll write faster, cleaner, and more efficient Angular applications — even as a beginner.