Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
disable change detection anagular

How to disable automatic change detection strategy in angular component?

Aman Jain, July 4, 2021November 8, 2023

In angular all components by default take the changes as any event occur, but sometime we disable automatic change detection strategy in angular. Thus, to detach the two way binding in component we can use changeDetection strategy in component metadata. Angular Change Detection Strategy is simple to implement using the metadata of component.

There is two type of change detection strategies to disable automatic change detection strategy in angular.

  1. ChangeDetectionStrategy.Default
  2. ChangeDetectionStrategy.onPush

ChangeDetectionStrategy.Default

By default angular use ChangeDetectionStrategy.Default which means if you make changes in any variable, event, promises or XHR request then it will make all changes in your html file as well.

@Component({
  selector: "app-root",
  template: `
    <div>
      <h1>Counter: {{ this.inc }}</h1>
      <input
        type="button"
        (click)="this.update()"
        value="Update Counter"
      />
      <child-component></child-component>
    </div>
  `
})
export class AppComponent {
  inc = 0;

  update() {
    this.inc += 1;
  }
}



The above example will also update the child content.

ChangeDetectionStrategy.onPush

If we want more performance in our application or do not want dirty check on each event, XHR etc. then we can use ChangeDetectionStrategy.onPush. you basically tell angular to not guess anything on any event, it will only reflect the template if @Input decorator value changed or if developer wanted to make changes using the componentRef.markForChange() or changeDetectionRef.detectChanges() method.

@Component({
  selector: "app-root",
  template: `
    <div>
      <h1>Counter: {{ this.inc }}</h1>
      <input
        type="button"
        (click)="this.update()"
        value="Update Counter"
      />
      <child-component></child-component>
    </div>
  `,
changeDetection:ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  inc = 0;

  update() {
    this.inc += 1;
  }
}



What is ChangeDetectionRef and how to use it?

ChangeDetectionRef is a base class which provides change detection functionality, when we called this ChangeDetectionRef.detectChanges() forcefully, it means detectChanges check the view and childrens and re-render the view even if the changeDetection strategy in component is ChangeDetectionStrategy.OnPush.

See the example below:

Related

Softwares Angular Javascript Ubuntu

Post navigation

Previous post
Next post

Related Posts

Javascript Min Length and Max Length Validation in Angular 12 13

Min Length and Max Length Validation in Angular 12 / 13 ?

March 21, 2022March 21, 2022

Angular provides built-in library for validation, in the same way it gives validation methods to validate the string and numbers length as well. so in this tutorial i am going to explain how to use min length and max length validation in angular. In angular validation library it provides different…

Read More

What is pipe in angular and create a custom pipe?

September 2, 2021September 2, 2021

Pipes are used in angular to transform the data or value. Pipes can be able to transform any type of data type like string, date, currency or any data. It can be used both in template as well in component. We can use pipes anywhere in our application and it…

Read More
Angular angular file upload

How to upload files with form data in angular 12?

June 20, 2021November 8, 2023

in this tutorial we will learn to upload files with form data in angular. it’s not easy to upload the files along with form data in angular in compare to JQuery and other JavaScript framework. Angular upload a form in JSON and some time it get difficult to obtain the…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Mapping Together: The Vibrant Spirit of OpenStreetMap Japan
  • Understanding High Vulnerabilities: A Deep Dive into the Weekly Summary
  • Building a Million-Dollar Brand: The Journey of Justin Jackson
  • Mastering Schedule Management with Laravel Zap
  • The Resilience of Nature: How Forests Recover After Fires
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version