OnPush Change Detection
Reduce checks with OnPush strategy.
OnPush Change Detection is a free Angular Academy lesson on CoddyKit — lesson 2 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.
The Performance Problem
The default strategy checks every component on every tick. In large apps this adds up. OnPush tells Angular to skip a component unless something relevant changed.
Enabling OnPush
Set the changeDetection option on the component.
@Component({
selector: 'app-user',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ user().name }}'
})
export class UserComponent {}When OnPush Re-checks
An OnPush component is checked only when: an @Input reference changes, an event fires from its template, an observable bound with async emits, or you call markForCheck().
Input Reference Equality
OnPush compares input references with Object.is. Mutating an object in place does not trigger a re-check; you must pass a new reference.
// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };Immutability Helps
OnPush pairs naturally with immutable data. Always create new objects/arrays instead of mutating, so reference checks reliably detect changes.
this.items = [...this.items, newItem];Events Still Work
Events from the component's own template (clicks, inputs) mark it for checking automatically, so local interactivity works without extra code.
<button (click)="count.set(count() + 1)">+</button>The async Pipe
The async pipe calls markForCheck() when its observable emits, making OnPush work seamlessly with streams.
<p>{{ data$ | async }}</p>markForCheck
When you update state outside the normal triggers, call markForCheck() to schedule the component (and its ancestors) for the next tick.
private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();Signals and OnPush
Signals integrate with OnPush: reading a signal in the template registers a dependency, and updating it automatically marks the component for check, no manual calls needed.
count = signal(0);
increment() { this.count.update(c => c + 1); }OnPush Propagation
When marked, the component and all its ancestors up to the root are flagged so the path is checked. Children are checked normally below it.
Best Practice
Make OnPush the default for new components. Combined with signals or immutable inputs, it dramatically reduces unnecessary work.
Quick Check
Test your understanding of OnPush.
Recap
You learned that ChangeDetectionStrategy.OnPush skips checks unless an input reference changes, a template event fires, an async pipe emits, or you call markForCheck(). It pairs best with immutable data and signals.
Frequently asked questions
Is the “OnPush Change Detection” lesson free?
Yes — the full text of “OnPush Change Detection” 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 “OnPush Change Detection”?
Reduce checks with OnPush strategy. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “OnPush Change Detection” 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
- How Change Detection Works
- OnPush Change Detection
- Zoneless Angular
- Optimizing Lists and Rendering