Angular Change Detection OnPush Signals is an important Angular topic because it appears in real projects, debugging sessions, and interviews. Learn the meaning first, then connect it to a small working example so the rule does not stay abstract.
For this page, focus on what problem Angular Change Detection OnPush Signals solves, where developers usually make mistakes, and how to verify the result. The audit note for this lesson was: under 650 content words; limited checklist/practice/mistake/FAQ notes .
A strong understanding of Angular Change Detection OnPush Signals should include syntax, behavior, one realistic use case, one failure case, and one quick way to check your work with tools or output.
Angular Change Detection OnPush Signals should be studied as a practical Angular lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
In the angular > change-detection page, the notes should connect the definition with a working scenario, a mistake that beginners actually make, and the exact check that proves the fix. That makes the topic useful for coding, debugging, and interview revision.
Change detection is how Angular decides when to update the DOM. When data changes, Angular checks the component tree and re-renders any component whose data has changed. Angular 21 defaults to zoneless change detection powered by Signals - the most efficient approach yet.
| Strategy | When it checks | Best for |
|---|---|---|
| Default | Every event, timer, HTTP response (entire tree) | Simple apps, prototyping |
| OnPush | Only when inputs change by reference, events fire, or markForCheck() is called | Performance-critical components |
| Zoneless (Signals) | Only when a signal that the template reads changes | Angular 21 default - best performance |
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
interface Product {
id: number;
name: string;
price: number;
}
@Component({
selector: 'app-product',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div>
<h3>{{ product.name }}</h3>
<p>${{ product.price }}</p>
</div>
`
})
export class ProductComponent {
@Input() product!: Product;
// Angular only re-checks this component when:
// 1. The 'product' input reference changes (new object)
// 2. An event fires inside this component
// 3. markForCheck() is called manually
}
// IMPORTANT: With OnPush, mutating the object won't trigger re-render
// BAD: this.product.price = 20; // same reference - no update
// GOOD: this.product = { ...this.product, price: 20 }; // new referenceIn Angular 21, Signals are the recommended way to manage state. Angular tracks exactly which signals a template reads and only updates that component when those signals change - no Zone.js, no full-tree checks.
import { Component, signal, computed } from '@angular/core';
@Component({
selector: 'app-counter',
standalone: true,
template: `
<p>Count: {{ count() }}</p>
<p>Doubled: {{ doubled() }}</p>
<button (click)="increment()">+1</button>
`
})
export class CounterComponent {
count = signal(0);
doubled = computed(() => this.count() * 2);
increment() {
this.count.update(v => v + 1);
}
// Angular only re-renders this component when count() changes
// No Zone.js needed - pure signal-based reactivity
}import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
// Enable zoneless change detection (default in Angular 21)
provideExperimentalZonelessChangeDetection(),
]
};import { Component, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
@Component({
selector: 'app-manual',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<p>{{ data }}</p>`
})
export class ManualComponent {
private cdr = inject(ChangeDetectorRef);
data = 'initial';
updateFromExternalSource() {
// Called from a third-party library callback (outside Angular)
this.data = 'updated';
this.cdr.markForCheck(); // tell Angular to check this component
}
pauseDetection() {
this.cdr.detach(); // stop checking this component
}
resumeDetection() {
this.cdr.reattach(); // resume checking
this.cdr.detectChanges(); // run one check immediately
}
}When studying Angular Change Detection OnPush Signals, separate three things: the concept, the syntax, and the situation where it is useful. This prevents the lesson from becoming a list of commands with no practical meaning.
In Angular, Angular Change Detection OnPush Signals becomes easier when you build a tiny example first, then increase complexity. Add one realistic input, one invalid or boundary input, and one explanation of why the result changes.
const state = { topic: "Angular Change Detection OnPush Signals", ready: true };
if (state.ready) {
console.log(state.topic + ": render or run the normal path");
}const response = null;
const message = response?.message ?? "Angular Change Detection OnPush Signals: show a clear fallback";
console.log(message);Memorizing Angular Change Detection OnPush Signals without the situation where it is useful.
Connect Angular Change Detection OnPush Signals to a concrete Angular task.
Testing Angular Change Detection OnPush Signals only with the perfect input.
Include empty, missing, duplicate, incompatible, or failed cases when relevant.
Changing code before reading the visible symptom or error message.
Inspect the output, state, configuration, or stack trace connected to Angular Change Detection OnPush Signals.
Memorizing Angular Change Detection OnPush Signals without the situation where it is useful.
Connect Angular Change Detection OnPush Signals to a concrete Angular task.
The common mistake is memorizing syntax without understanding when the behavior changes or fails.
Remember the problem it solves in Angular, then attach the syntax or steps to that problem.
You can predict the result of a small example, explain a failure case, and choose it over a nearby alternative for a clear reason.
They often copy the syntax but skip the state, input, dependency, selector, route, type, or configuration that controls the behavior.
Explore 500+ free tutorials across 20+ languages and frameworks.