Angular Change Detection Strategy: OnPush & Default Strategies

Change detection is referred to as the mechanism that checks against the current state to that of the new state. Any difference between the two states suggests that there are changes that need to be updated. It means that the view has to be updated with the change in data.

Any change that occurs in the components during a change in the app is detected through Angular 2+. Whenever a model is changed, the associated changes are detected by angular and the views are updated immediately. This change is referred to as the change detection in angular. 

Check out our free courses to get an edge over the competition.

The change can be the result of data received from network requests or occur through a user event. With the increasing size of the app, more work has to be performed by the method of change detection. Angular detection is necessary to keep in sync between the underlying views and the corresponding models.

The change in the angular model may be due to any of the following:

• DOM events (click, hover over, etc.)
• AJAX requests
• Timers (setTimer(), setInterval())

Prerequisites

For getting a hold of this article you might have to be familiar with the concepts of angular components. Also, the concepts of value types and reference types might be helpful in understanding the article.

Check out upGrad’s Full Stack Development Bootcamp (JS/MERN)

Change Detection in Angular

The change detection in angular is done in two steps with the first one being the updating of the application model through the developer. It can be preceded either through emitting an event or through the change in the property of a component. The second step i.e. the angular’s job of reflecting the model. It detects if any new data is pushed into the component explicitly. This can be done either through a component or an Observable subscribed to using the async pipe.

Therefore, the two steps are:

• Update the application model (developer);
• Reflect the state of the model in the view (Angular).

Check out upGrad’s Java Bootcamp.  

Change detection in angular detects changes of common browser events like mouse clicks, HTTP requests, and other types of events. Once the change is detected it is then decided whether the update of the view is required or not.

Change Detection Strategies

Two angular change detection strategies are present which are the default one and the onPush.

The default strategy

• The changes on a model are monitored by angular to make sure that all the changes in the model are captured. The differences between the new and the previous state are checked by angular.
• For a view to be updated, the angular should have access to the new value which is then compared to the old value. Based on this the decision is made whether to update the view or not.
• Therefore, in a default strategy, the angular revolves around the question of whether there are any changes in the value.
• There is no assumption as to where the components depend upon. It is a conservative strategy that will check anytime there is an associated change. Checks will be performed over any browser events, times, promises, and XHR’s.
• The strategy might be a problematic one when big applications are to be considered with many components. 
• By default, it uses the ChangeDetectionStrategy.Default strategy.

Overriding the default mechanisms of the browser

• Several low-level APIs will be patched up by angular at the startup time. These APIs may be addEventListener; a browser function that is used for registering browsing events. 
• The addEventListener will be replaced by angular with a newer version performing like the earlier version.
• More functionality is added to the event handler by the addEventListener new version. The UI is updated after running the performance check by angular.

Working

A library that is shipped with Zone.js does the low-level patching of browser API. 

• The zone is defined as the execution content under multiple JVM execution turns. Extra functionality can be added to a browser through this mechanism. The zones are used internally by angular to detect any changes and trigger the detection. 
• There are normally three phases in a zone, i.e. it is stable at the start, becomes unstable if any task runs in the zone, and it becomes stable once the task is completed.
• Browser mechanism that is patched up to support the detection in change are:

1. browser events such as click, etc.
2. setInterval()and setTimeout()
3. Requests of Ajax HTTP

• To trigger change detection in angular, Zone.js is used to patch several APIs of another browser like Websockets. 
• A limitation to this method is: if Zone.js doesn’t support the browser API, then there will be no trigger during change detection.

How does angular change detection work when change detection is triggered?

The triggered changes are detected through a change detector. This change detector is created during the startup time of the application. An example of the TodoItem component can be considered. An event will be emitted on receiving an object Todo by the component if the status of the todo is toggled. Learn more on how to run angular projects.

Working of the default change detection mechanism

The mechanism of change detection is a simple one. In each expression, the value that is current to the property is compared to the value of that property in the previous state in the expression. 

• Having a difference in the value of the property will set the value to true of isChanged. 

1. OnPush strategy

• On using the onPush strategy, the angular need not have to perform any guess on when the check has to be performed. 
• Based on the change in the input reference, or events triggered by the components themselves, the angular will perform the check for changes.
• Also, the angular can be explicitly asked to perform the check for changes. This is done through the method of componentRef.markForCheck(). 
• The components during this strategy will depend only on its inputs. Change detection strategy will be performed only when:
• There is a change in the input reference.
• There are associated changes in the components of the model or any of its children.
• When explicit change detection has to be performed. 
• When an async pipe in the view is used.
• Compared to the default strategy, the onpush strategy mainly revolves around two questions which are:
• Is there any change in the reference type?
• If there are changes in the reference of the reference type, then are there any changes in the values of the heap memory?
• It prevents unnecessary checks over the components and also over the child components.

Implementing the onPush Strategy for a Component

Only when a new reference is passed as @Input() value, it triggers change detection. The values may be primitive types like numbers, booleans, string, and null. Arrays and objects can also be used. Modified objects or arrays cannot be used for triggering change detection on an onPush component as a new reference is not created for them. Therefore, a new object or an array reference is to be passed to trigger the detector detecting the change.

To avoid bugs in the method of change detection methods, the application can be built using onPush change detection everywhere through the use of immutable objects and lists. Modification of immutable objects can be done through the creation of a new object reference and hence:

• For every change, the onPush change detection is triggered.
• A new object reference is always created which prevents the cause of bugs.

In such cases, the Immutable.js can be used as it contains immutable data structures for objects (Map) and lists (List).

• Adding the changeDetection parameter in the component annotation will implement the onPush strategy. Instead of passing new references every time, the ChangeDetectorRef can also be used for complete control.

ChangeDetectorRef.detectChanges() 

• The method of change detection can be attached or detached manually with methods of detach and reattach in the changeDetectorRef.

ChangeDetectorRef.detach() and ChangeDetectorRef.reattach()

Immutable.js

When using the onPush strategy for change detection, it is always a good idea if immutability is enforced.  In such cases, Immutable.js is used. 

The immutable.js is a library created for incorporating immutability in JavaScript along with immutable data structures like List, Stack, and Map.

To add Immutable.js in the projects, the following command has to be used in the terminal. Learn more about angular projects.

$ npm install immutable –save

To import the data structures from Immutable.js, the following command has to be used. The command shows importing only the List, and Map data structures in this case.

import {Map, List} from ‘immutable’;

An array can also be used.

Also if Immutable.js is used, a few drawbacks are associated with it.

• Using the API is a bit cumbersome.
• Interfaces cannot be implemented to the data model as the library Imutable.js doesn’t support any interfaces.

Learn Software Courses online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs, or Masters Programs to fast-track your career.

Summary

The article introduced you to the mechanism of change detection and the strategies. Angular will perform change detection over all the components by default. Also, the ChangeDetectorRef can be applied for detecting changes in the new references when the data gets mutated. The demand for angular development is keep on increasing which results in angular developer salary in India.

If you want to learn more about software technology, its development, and the mechanism behind it, you can check the course Executive PG Programme in Software Development – Specialisation in Full Stack Development offered by upGrad. The specialization course is a 23 weeks online program offering over 300+ case studies to boost up your knowledge and available tools and programming language to enhance your practical skills. If you have any more queries related to the course, drop us a message. Our team will contact you.