Change Detector In Angular

Introduction:

Hello Reader, here we will understand what is Change Detection, and What is property of change detection and how can we implement it in our project. here we will see all that basic things and properties.

The first question that will arise in our mind What is Change Detector and why we need this? let’s start with the meaning.

What is change detection?

The basic idea of change detection is to perform checks against 2 states, one is that the current state and, the other is the new state. If one amongst these states is totally different from each other, then one thing has modified, which means we’d like to update (or re-render) the view.

this is a more specific term for change detection. we are able to additionally say that in a simple approach change Detection means that change the view (DOM) once the data has modified.

How Does it Work?

Angular can performs change detection on all components when something changes in your app from something like a user event or data received from a network request. angular can runs the change detector once either of the subsequent happens:

• An event, such as a click or submit, gets fired.
• An XHR is called to work with an API.
• An asynchronous JavaScript function, such as set timeout() or setInterval(), gets executed.

What are Angular Change Detection Strategies?

Basically Angular provides you 2 change Detection methods, the Default, and onPush.

We will understand both of them one by one.

Default strategy:

• To know whether the view ought to be updated or not, Angular must access the new value, compare it with the previous one, and make the choice on whether the view ought to be updated.
• By default, Angular makes no assumption on what the component depends upon. therefore it’s to be conservative and will check every time something might have modified, this can be called dirty checking. during a very additional concrete method, it’ll perform checks for every browser’s events, timers, XHRs, and promises.
• This can be problematic once you’re starting to have a giant application with several elements, particularly if you’re focused on performance.

onPush strategy:

• When using the onPush strategy on the component, you primarily command Angular that it shouldn’t create any guess on when it must perform the check for change. it’ll rely solely on the change of the Input references, some events triggered by itself or one among its children. Lastly, you, the developer, will raise explicitly Angular to do it with the componentRef.markForCheck() method.
• With onPush, the component solely depends on its inputs and embraces the immutability, the change detection strategy can kick in when:

1. The Input reference changes.
2. An event originated from the component or one among its children;
3. Run change detection explicitly (componentRef.markForCheck()).
4. Use the async pipe in the view.

How to add manually change detection References in Angular component.

1. Set references in Component.

constructor(private cd: ChangeDetectorRef) { }

Get the result from API and call detectChanges() method.

getResultList() {
   this._resultServiceProxy.getResult().subscribe(result => {
     this.ResultList = result;
     this.cd.detectChanges();
   })
 }

this is an easy methodology of change detection. and in this manner, we will implement it in our code.

Change detection also provides many different methods like below.

So we are able to say that change Detection is the backbone of the Angular framework, and every component has its own change detector.