Everything you need to know about Change Detection


Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.


Web application these days are designed to be interactive. Whenever the state of application changes, the code should detect and handle the changes and reflect the changes in Web User Interface. The mechanism is named as

Change Detection

Almost, all the popular web frameworks has this mechanism.

Why you need to know about Change Detection?

Everyone who works in angular code should aware of Change Detection.

Change Detection is an integral part of application which deals with DOM updates whenever there is a change in model or data.

Performance of application also depends on Change Detection as well.

So, now you are ready to know what is Change Detection?

What is Change Detection?

Change detection is the mechanism designed to track changes in an application state and render the updated state on the screen.

Application Architecture

Normally, architecture will contain

Data or Model → Template → DOM

Data will provide the data that’s needs to be displayed, DOM will be showed in UI and template will be used to fit the data into DOM.

The binding mechanism will happen under the hood which is main part of this architecture. We are going to discuss about it only.

The process of keeping the data in UI updated similar the state of application. This mechanism is called as Change Detection.

A quick example:


In this example, we are change variable ‘name’ value using timeOut function() after 3 seconds.

Once we have changed the variable value, the UI automatically gets refreshed without any delay.

How that happens?

That’s the work of angular framework here. It tracks the value and reflects in the UI.

Frameworks take care of synchronization between the internal state of the application and the user interfaces for us.

When should change detection happen?

As soon as the application state changes. The application state can change in following cases

  • Event callback
  • Network calls
  • Timers

Any asynchronous call can cause a change in application state and that’s the instance where we should update our state on UI.

A simple detectChange will look like this,

let detectChanges => () => {
  if(currentState != prevState) {


ZoneJS is an API which has been mostly ported out from the dart language.

Behind the scenes, ZoneJS monkey patches the function. Basically, it helps to keep an eye on all async tasks, and provide an ability to call code before or after a task has been completed. The Zone API has different hooks to place your code onBeforeTask, onAfterTask, onZoneCreated, onError.

var myZoneSpec = {
  beforeTask: function () {
    console.log('Before task');
  afterTask: function () {
    console.log('After task');

var myZone = zone.fork(myZoneSpec);
myZone.run(function() {
   console.log('My task successfully got executed.')

// Output:
// Before task
// My task successfully got executed.
// After task

So Angular uses the power of Zones to fire change detection. What happens is, if any asynchronous call happens, ZoneJS API emits data to the onMicrotaskEmpty observable, and angular calls the detectChanges method based on the same.

Change Detection Strategy

  1. Default
  2. OnPush

The strategy that the default change detector uses to detect changes. When set, takes effect the next time change detection is triggered.


Use the default CheckAlways strategy, in which change detection is automatic until explicitly deactivated.


Use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). It can still be explicitly invoked. This strategy applies to all child directives and cannot be overridden.


Let’s add OnPush option in the same example. Now the output will not render until there is a state of change happens in the application. You can find the example here.

Happy Coding!

Template literals | Template strings

Template literals in ES6 (EcmaScript) allows us to embed expressions to our string literals. We can use multi-line strings and string interpolation features with them.

Template literals are enclosed by the back-tick (` `) instead of double or single quotes.

var message = `single line string`;

// single line string

We can include place holders for string substitution using ${ } syntax

var expression = "place holder"; // string substitution
console.log(`this is a text with ${expression} in a line`);

// this is a text with place holder in a line

We can directly use expression interpolation to embed inline math

var a = 5;
var b = 5;

console.log(`the addition of a+b = ${a+b}`);
// the addition of a+b = 10

We can also call functions and use member functions in strings

function sample() { return "text from sample method"; }

console.log(`yes! ${sample()} and i am in uppercase`.toUpperCase());


The above code retrieves data from sample() method and converts it to uppercase in run-time.

Multiline Strings

We can achieve multi line strings, previously we used to insert new line character in our string

console.log(`First line
Second line`);
// First line 
// Second line

Raw strings

The special raw property, available on the first function argument of tagged template literals, allows you to access the raw strings as they were entered.

String.raw`Hi \n ${2+3}!`;
// "Hi \n 5!"

Tagged template literals

A more advanced form of template literals are tagged template literals. With them we able to modify the output of template literals using a function. The first argument contains an array of string literals. The second, and each argument after the first one, are the values of the processed substitution expressions. We can use any name to our function.

var a = 1;
var b = 2;

function tag(strings, ...values) {
 console.log(strings[0]); // "One "
 console.log(strings[1]); // " Two"
 console.log(strings[2]); // " Three"
 console.log(values[0]); // 1
 console.log(values[1]); // 2

tag`One ${ a } Two ${ b } Three`;

// One 
// Two 
// Three
// 1
// 2

Happy exploring EcmaScript 🙂