Angular 4 Change Detection

Change detection updates your views when the app data changes. On every change event, the app checks its state and updates the view as needed, keeping Angular views in sync with components and directives.

While Angular 1 used the digest cycle to comb the DOM for changes, Angular's modern versions feature a more efficient change detection approach. This refresh explains how change detection in the latest Angular works and how it's improved.

Key Takeaways

• Angular's change detection updates the view efficiently by checking only the necessary components.
• Events triggering change detection include browser interactions, asynchronous activity, and data requests.
• The unidirectional flow makes change detection more predictable and performant.
• OnPush strategy can optimize change detection but requires immutability.

Angular Change Events

Change events can include:

• Browser events like click and mouseover.
• Asynchronous operations such as setTimeout() and setInterval().
• Data requests, including HTTP requests.

Whenever these events occur, Angular employs the zone.js library to patch browser APIs. This integration provides Angular-specific functionality, which enhances event handling.

How Change Detection Works

Each Angular component has its own change detector, keeping track of data-driven template properties. For instance, a property like {{name}} in your view will have its changes monitored by the component's detector. If it detects a different value, it updates the DOM accordingly.

Differences from Angular 1

Angular 1's two-way data binding kept views in sync via a bi-directional flow, causing the digest cycle to repeatedly check the DOM for changes. While keeping the model and view in sync, this often led to performance lags once many watchers were involved, due to its recursive DOM checks.

Unidirectional Data Flow

Unlike Angular 1, Angular uses a unidirectional data flow, akin to the flux architecture. Data moves in a single direction, ensuring a more predictable update pathway. Each component's change detector responds to events in a top-to-bottom tree traversal, starting from the root component. This pattern is more efficient and ensures predictable updates.

Advantages of Improved Change Detection

Modern Angular change detection synergizes well with just-in-time (JIT) compilers. Each component has its blueprint, allowing the browser to avoid runtime property comparisons, which boosts performance by predicting app behavior more effectively.

This method also enables Angular to update only altered DOM parts, unlike Angular 1's full DOM updates. Minimizing DOM manipulation enhances speed and efficiency, as DOM operations are costly.

Manual Change Detection in Angular

You can manually dictate a component’s change detection by setting the changeDetection property in the @Component decorator. By using changeDetection: ChangeDetectionStrategy.OnPush, changes are only detected when component inputs are modified, not on every event.

Immutability and OnPush Strategy

OnPush allows greater control over when change detection occurs, helping to bypass unnecessary checks if component inputs are unchanged. However, it operates only if objects are immutable. For instance, directly changing an object’s property won’t trigger change detection. Instead, you need to assign a new reference:

person = new Person({
    name: "Sam"
})

This new reference will be detected by OnPush change detection. Libraries like immutable.js can help enforce immutability. It's important to note the default change detection in Angular doesn't require immutability, only the OnPush strategy does.

Conclusion

For most scenarios, the default change detection strategy in Angular suits well, and is a substantial advancement over Angular 1. However, using OnPush may be beneficial for high-performance needs or large datasets. Nonetheless, standard Angular change detection efficiently manages events and DOM updates without additional configuration.

FAQ

What's the main benefit of Angular's change detection over Angular 1?

It depends less on recursive DOM checks, optimizing performance while only refreshing necessary DOM parts.

Do I always need to use OnPush strategy in Angular?

No, OnPush is optional. It's advantageous for immutability and performance optimization in specific cases, but the default detection works for most applications.

How does unidirectional data flow improve predictability?

Data flows consistently from top to bottom through the component tree, ensuring a single pathway for state updates, avoiding the intricate cycle of two-way bindings.

What's zone.js role in change detection?

Zone.js patches browser APIs to extend and integrate Angular-specific functionalities, facilitating efficient change detection after browser events.