Optimizing Change Detection

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.