Optimizing Change Detection
Explore how to improve Angular application performance by mastering change detection control using the OnPush strategy. Understand the role of @Input annotations and observables to reduce unnecessary checks and manage state effectively.
We'll cover the following...
Change detection and performance
Every change triggers a noticeable pause in our hospital patient app. Angular is fast, but the app is currently forcing it to do thousands of checks anytime a change is made.
Like with any performance issue, there are multiple solutions, but in this case, we’ll focus on taking command of the change detection ourselves with the onPush strategy.
Each component comes with its own change detector, allowing us to selectively override how a component handles change detection. The onPush strategy relies on one or more observables annotated with @Input to do change detection.
Instead of checking every round, components using onPush only run change detection when any of the annotated observables emit an event.
@Input annotation
So what is this @Input annotation, anyway?
Angular’s tree structure means that information flows from the top (app.component.ts) down through the rest of the components.
We can use ...