Blog_Banner_Asset
    Homebreadcumb forward arrow iconBlogbreadcumb forward arrow iconFull Stack Developmentbreadcumb forward arrow iconAngular Change Detection Strategy: OnPush & Default Strategies

Angular Change Detection Strategy: OnPush & Default Strategies

Last updated:
18th Jun, 2021
Views
Read Time
9 Mins
share image icon
In this article
Chevron in toc
View All
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. 

Ads of upGrad blog

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.

Explore our Popular Software Engineering Courses

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.

In-Demand Software Development Skills

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.
Ads of upGrad blog

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.

Explore Our Software Development Free Courses

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. 

Profile

Rohan Vats

Blog Author
Software Engineering Manager @ upGrad. Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.

Frequently Asked Questions (FAQs)

1What are the different change detection strategies in Angular?

Angular provides several change detection strategies to optimize the performance of change detection. However, the default strategy is named Detection. During this process, Angular walks the entire tree of components from the root to the children components. Each time the tree changes, Angular notifies the components by calling their _detectChanges method. For components that use the OnPush change detection strategy, Angular doesn’t walk the entire tree each time. Rather, it compares the current and previous values of data properties and calls the _detectChanges method only when a change occurs. By default, Angular uses the strategy that walks the entire tree.

2What are directives in Angular?

Directives in Angular are reusable components. Directives allow extending HTML vocabulary and make it more dynamic. It is a new concept, which is being introduced in Angular, to extend the user interface. Directives are a special type of component, which can be used as an attribute, element or class. If a component is used as element, then it is called an element directive, if it is used as attribute, it is called an attribute directive and if it is used as classes, it is a class directive. There are around 11 built-in directives provided by Angular, like ng-repeat, ng-show, ng-controller etc. Angular also provides a facility to create custom directives.

3What are the filters in Angularjs?

AngularJS provides several filters in addition to the filters provided by the browsers. Filters are strictly used in formatting the data before displaying it to the user. It is always recommended to filter the data using the filters so that the user gets to see the same data every time. Filters can also be used to make the data validation more efficient. Angular.js filters allow you to take a piece of HTML and manipulate it to your will, e.g. uppercase, lowercase, etc. Filters allow you to take an array of values and create a list of objects based on the values.

Explore Free Courses

Suggested Blogs

How to Rename Column Name in SQL
46652
Introduction We are surrounded by Data. We used to store information on paper in enormous file organizers. But eventually, we have come to store it o
Read More

by Rohan Vats

04 Mar 2024

Android Developer Salary in India in 2024 [For Freshers & Experienced]
900974
Wondering what is the range of Android Developer Salary in India? Software engineering is one of the most sought after courses in India. It is a reno
Read More

by Rohan Vats

04 Mar 2024

7 Top Django Projects on Github [For Beginners & Experienced]
51028
One of the best ways to learn a skill is to use it, and what better way to do this than to work on projects? So in this article, we’re sharing t
Read More

by Rohan Vats

04 Mar 2024

Salesforce Developer Salary in India in 2024 [For Freshers & Experienced]
908400
Wondering what is the range of salesforce salary in India? Businesses thrive because of customers. It does not matter whether the operations are B2B
Read More

by Rohan Vats

04 Mar 2024

15 Must-Know Spring MVC Interview Questions
34527
Spring has become one of the most used Java frameworks for the development of web-applications. All the new Java applications are by default using Spr
Read More

by Arjun Mathur

04 Mar 2024

Front End Developer Salary in India in 2023 [For Freshers & Experienced]
902196
Wondering what is the range of front end developer salary in India? Do you know what front end developers do and the salary they earn? Do you know wh
Read More

by Rohan Vats

04 Mar 2024

Method Overloading in Java [With Examples]
25567
Java is a versatile language that follows the concepts of Object-Oriented Programming. Many features of object-oriented programming make the code modu
Read More

by Rohan Vats

27 Feb 2024

50 Most Asked Javascript Interview Questions & Answers [2024]
3849
Javascript Interview Question and Answers In this article, we have compiled the most frequently asked JavaScript Interview Questions. These questions
Read More

by Kechit Goyal

26 Feb 2024

OOP Concepts and Examples That Every Programmer Should Know
25126
In this article, we will cover the basic concepts around Object-Oriented Programming and discuss the commonly used terms: Abstraction, Encapsulation,
Read More

by Rohan Vats

26 Feb 2024

Schedule 1:1 free counsellingTalk to Career Expert
icon
footer sticky close icon