Exploring Transformation in Angular

Question

Exploring Transformation in Angular

I am looking to enhance my understanding of how ChangeDetection works, and I have a query in this regard.

When using

changeDetection: ChangeDetectionStrategy.OnPush

, do I also need to check if currentValue exists in the ngOnChanges lifecycle hook, or is it sufficient to just verify if the input has changed?

Allow me to provide an example to clarify my question:

As previously mentioned, with

changeDetection: ChangeDetectionStrategy.OnPush

, I have an input like this:

@Input() isInspectionReopened: boolean;

. My ngOnChanges function looks as follows:

ngOnChanges(changes: SimpleChanges) {
  if(changes.isInspectionReopened) {
     // do something
  }
}

Should I only check changes.isInspectionReopened, or do I also need to consider adding

changes.isInspectionReopened.currentValue

?

angular typescript angular-changedetection

Answer 1

Answer №1

SimpleChanges only includes values that have been changed, so if the isInspectionReopened prop remains unchanged, it will not appear there.

When utilizing ChangeDetectionStrategy.OnPush, it is generally recommended to avoid using the ngOnChanges callback entirely. The ChangeDetectionStrategy.OnPush solely impacts the logic governing when change detection should be performed. Thus, a modification to the isInspectionReopened prop triggers change detection because it is an '@Input' property, subsequently updating your component's HTML if bound to the property.

However, in cases where isInspectionReopened is not an '@Input' property (for instance, if the component fetches and updates the value from a server), the OnPush detection mechanism may fail to detect such changes compared to standard change detection. To address this with the OnPush strategy, you can utilize RxJs Observables along with the async pipe to enforce change detection – check out an example here.

It's crucial to note that '@Input' properties prompt change detection exclusively when they are modified through data binding from the parent component. If an '@Input' property's value is altered by the component itself, change detection does not get triggered.

Moreover, component DOM events also trigger change detection. For instance, modifying something within a click handler in response to a click event will always result in the triggering of change detection due to the event itself.

Answer 2

SimpleChanges only includes values that have been changed, so if the isInspectionReopened prop remains unchanged, it will not appear there.

When utilizing ChangeDetectionStrategy.OnPush, it is generally recommended to avoid using the ngOnChanges callback entirely. The ChangeDetectionStrategy.OnPush solely impacts the logic governing when change detection should be performed. Thus, a modification to the isInspectionReopened prop triggers change detection because it is an '@Input' property, subsequently updating your component's HTML if bound to the property.

However, in cases where isInspectionReopened is not an '@Input' property (for instance, if the component fetches and updates the value from a server), the OnPush detection mechanism may fail to detect such changes compared to standard change detection. To address this with the OnPush strategy, you can utilize RxJs Observables along with the async pipe to enforce change detection – check out an example here.

It's crucial to note that '@Input' properties prompt change detection exclusively when they are modified through data binding from the parent component. If an '@Input' property's value is altered by the component itself, change detection does not get triggered.

Moreover, component DOM events also trigger change detection. For instance, modifying something within a click handler in response to a click event will always result in the triggering of change detection due to the event itself.

Exploring Transformation in Angular

Answer №1

Similar questions

Find out if all attributes of the object are identical

Error: The JSON file cannot be located by the @rollup/plugin-typescript plugin

Running the Express service and Angular 6 app concurrently

Issue - firestore has not been defined (Occurs strictly after the use of "then")

Converting a file buffer to upload to Google Cloud Storage

Error: Trying to access a property that does not exist on an undefined object (retrieving 'kind

Implementing nested popup windows using Bootstrap

How can we enhance the angular material date picker by inserting a div on either the left or right side to display

Tips for sending back a response after a request (post | get) is made:

App routing functions correctly when navigating within the app, but does not work when directly entering a URL into

Unusual problem with accessing Object values in vscode using typescript

Should the User Id be retrieved within the ngOnIt() function?

Error in Angular ESLint: The key parameter is mandatory

What is the best way to remove the underline from Angular Material input fields?

The implementation of CommonJS modules allows for efficient modularization

What is the best way to implement a Promise Function within a For loop?

Utilizing the await keyword within a forkJoin operation in TypeScript

Utilizing an object property for @Input binding in Angular: A step-by-step guide

Validation of Forms and Displaying Error Messages in Angular 7

Position Bootstrap Modal in the center horizontally