Angular Change Detection Strategy: OnPush & Default Strategies
Updated on Nov 17, 2022 | 9 min read | 6.7k views
Share:
For working professionals
For fresh graduates
More
Updated on Nov 17, 2022 | 9 min read | 6.7k views
Share:
Table of Contents
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:
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)
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:
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.
Two angular change detection strategies are present which are the default one and the onPush.
The default strategy
A library that is shipped with Zone.js does the low-level patching of browser API.
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.
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.
1. OnPush strategy
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:
In such cases, the Immutable.js can be used as it contains immutable data structures for objects (Map) and lists (List).
ChangeDetectorRef.detectChanges()
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.
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.
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.
Get Free Consultation
By submitting, I accept the T&C and
Privacy Policy
India’s #1 Tech University
Executive PG Certification in AI-Powered Full Stack Development
77%
seats filled
Top Resources