5 questions foundWhat is change detection in Angular and why does it exist?
Beginner Change detection is the process Angular uses to check whether any data used in a component's template has changed, and if so, update the actual page to reflect the new values. It runs automatically whenever something happens, like a button click or data arriving from a server, keeping the screen in sync with your app's underlying data.
@Component({
selector: 'app-counter',
template: `<button (click)="count = count + 1">Count: {{ count }}</button>`
})
export class CounterComponent {
count = 0; // Angular automatically updates the displayed count after the click
}
Real-world example A counter button automatically shows the updated number the moment it is clicked, since Angular's change detection notices the underlying value changed and refreshes just that piece of the page.
Common follow-ups: What triggers change detection to run in a typical Angular app?;How is change detection different from how React or Vue detect updates?
Angular Signals;Performance & Lazy Loading
What is the difference between the Default and OnPush change detection strategies?
Intermediate The Default strategy checks every component in the app on every change detection cycle, regardless of whether its data actually changed. The OnPush strategy only checks a component when one of its inputs changes by reference, an event happens inside it, or an observable it is subscribed to emits a new value, which can meaningfully improve performance in larger apps.
@Component({
selector: 'app-product-card',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<p>{{ product.name }}</p>`
})
export class ProductCardComponent {
@Input() product!: Product;
}
Real-world example A large product listing page noticeably speeds up after switching every individual product card component to OnPush, since Angular no longer needs to unnecessarily check every single card on every user interaction elsewhere on the page.
Common follow-ups: What specifically needs to change for OnPush to correctly detect an update to an input object?;Does adopting OnPush everywhere in an app come with any real downsides?
Performance & Lazy Loading;Angular Signals
Why does mutating an array or object directly sometimes fail to trigger a component update when using OnPush?
Intermediate With OnPush, Angular only checks whether an input's reference has changed, not whether its internal contents have changed. Directly mutating an existing array or object keeps the same reference, so Angular does not detect anything different, even though the actual data inside has changed.
// Wrong with OnPush, mutates the existing array directly, Angular does not notice the change
this.items.push(newItem);
// Correct, creates a brand new array so Angular detects the change
this.items = [...this.items, newItem];
Real-world example A to do list component using OnPush that would not visually update after adding a new item is fixed by replacing a direct array mutation with a fresh array created using the spread operator, letting Angular correctly detect the change.
Common follow-ups: Why does this same problem not happen with the Default change detection strategy?;How do signals help avoid this specific class of bug entirely?
Angular Signals;State Management
How does Angular's newer zoneless change detection improve on the traditional Zone.js based approach?
Advanced Traditional Angular relies on Zone.js to automatically detect when something might have changed, such as after any asynchronous operation, then checks the entire app just in case. Zoneless change detection instead relies on explicit signals to know exactly what changed and where, letting Angular update only the specific parts of the page that actually need it, without the overhead of Zone.js patching every asynchronous browser API.
// A zoneless Angular app relies on signals to know exactly what changed
bootstrapApplication(AppComponent, {
providers: [provideExperimentalZonelessChangeDetection()]
});
Real-world example A performance sensitive application removes Zone.js entirely and relies fully on signals, seeing a measurable reduction in unnecessary change detection work across the app during heavy user interaction.
Common follow-ups: What existing code patterns need to change when migrating an app to be zoneless?;Is zoneless change detection considered stable enough for production use yet?
Zoneless Change Detection & Zone.js;Angular Signals
How would you manually trigger change detection in Angular when needed, such as after code that runs outside Angular's normal tracking?
Intermediate You can inject the ChangeDetectorRef service and call its detectChanges or markForCheck method to tell Angular to check a specific component, which is sometimes necessary when a value changes as a result of code Angular does not automatically know about, such as a third party library callback.
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) {}
onThirdPartyCallback(newValue: string) {
this.value = newValue;
this.cdr.detectChanges(); // manually tell Angular to check this component now
}
Real-world example A component integrating a third party mapping library manually calls detectChanges after the library's callback updates a value, ensuring the page correctly reflects the change even though Angular could not automatically detect it on its own.
Common follow-ups: What is the difference between detectChanges and markForCheck?;Why should manually triggering change detection generally be a last resort rather than a common pattern?
Angular Signals;Services & Dependency Injection