Angular Academy · Lesson

OnPush Change Detection

Reduce checks with OnPush strategy.

Lesson 2 of 413 steps

OnPush Change Detection is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “OnPush Change Detection” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “OnPush Change Detection”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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

← Back to Angular Academy