Angular’s Change Detection is responsible for updating the view when the model changes. The Default strategy checks all components in the component tree, while the OnPush strategy only checks components when an input reference changes, improving performance in certain scenarios.
In depth
Change Detection in Angular is a mechanism that ensures the view is always in sync with the model. The Default strategy, which is the default behavior, updates all components in the component tree when any change occurs, making it easier for developers but potentially leading to performance bottlenecks as the application scales. OnPush, on the other hand, allows developers to optimize their components by instructing Angular to only check a component when its input properties change or when it is explicitly marked for checking. This can drastically reduce the number of checks performed and improve performance, particularly in large applications with many components that do not change often. Understanding when and how to use these strategies is essential for building performant Angular applications.
Example scenario
In a large e-commerce application, we had a product detail page with numerous child components displaying various details. Initially, we used the Default Change Detection strategy, which led to performance issues as the application scaled. By switching to the OnPush strategy for components that received immutable data, we reduced unnecessary checks, leading to a noticeable improvement in rendering speed and overall user experience. This adjustment became pivotal in handling thousands of concurrent users without degrading performance.
Common mistakes
One common mistake developers make is using the Default Change Detection strategy indiscriminately across all components, which can lead to performance issues as the application grows. Another mistake is not properly managing immutable data, which is crucial for the OnPush strategy to work effectively; failing to do this can lead to bugs where the UI doesn't update despite the model changing. Developers should be mindful of when and how they apply these strategies to ensure efficient rendering.
Follow-up questions
- How would you decide when to use OnPush vs. Default?
- Can you explain how Change Detection is triggered in Angular?
- What are some strategies you have used to optimize Change Detection in large applications?
- How does immutability play a role in Change Detection?
Want all 2,000 questions in one PDF?
- Short answers, in-depth explanations, common mistakes and follow-ups
- 89 topics, from Beginner to Architect, with a clickable contents list
- 226 extra questions that are not on this website
- Free Bonus Pack: 30-day study plan, behavioral questions, salary scripts
Includes 226 extra questions that are not on this site, plus a free Bonus Pack.
Get both books for $9.99 (save $2.99):
The material stays free to read online. This is the organised, offline, print-ready PDF edition. Secure payment by PayPal; your personal download link is emailed after payment is confirmed. Digital product, no shipping.