Change Detection in Angular

Components are the most basic building blocks of a Angular Application .(At least in majority of generic Angular Applications).

How do you define state of a Angular Component ?

In layman terms state of a Angular Component is defined as status of all the variables/objects which are tied to the html template /view associated with the Component . Suppose we are displaying a view of a component as

<p>{{counter}}</p>
<button (click)="onclickfunction()" >Click Me</button>

And our Component Class is defined with implementation of function onclickfunction() as

export class ClassName{
counter : number = 0;
...
onclickfunction(){
this.counter++:
}

As soon as we click on the button named “Click Me” the onclickfunction() gets executed and it changes the value of “counter” variable .This distorts the current state of the Component. Every time the state of Component gets changed, the associated view also needs to be get updated .This process is called Change Detection.

The basic task of change detection is to take the internal state of a program and make it somehow visible to the user interface. This state can be any kind of objects, arrays, primitives, … just any kind of JavaScript data structures.