Issue with updating component

Question

Issue with updating component

Currently facing an issue with a component that utilizes the

changeDetection: ChangeDetectionStrategy.OnPush

The component's logic is as follows:

ngOnInit(){
  this.serivce.something
  .subscribe( evt => {
    // Logic to update values of the array (which is functioning correctly)
  });
}

The HTML structure looks something like this:

...
...
<div *ngFor="let item of myArray">
  <span *ngIf="item.showEye">TRUE</span>
  <span *ngIf="!item.showEye">FALSE</span>
</div>
...
...

The problem arises when using this strategy, as it fails to render the component even after making changes. Before editing, the array appears as follows:

https://i.sstatic.net/x9WZp.png

Note: showEye is set to true.

After the edit, the array now looks like this:

https://i.sstatic.net/uXxhr.png

Although showEye has been changed to false, nothing reflects in the HTML rendering.

At this point, the question arises - given the inability to remove this strategy, how can one prompt the component to re-render itself?

angular typescript

Answer 1

Answer №1

For updating your HTML, follow these steps:

Add this code to your component:

constructor(private cd: ChangeDetectorRef) {...}

ngOnInit(){
    this.serivce.something
        .subscribe( evt => {
            // Add logic here to update array values (logic is functioning)
            this.cd.detectChanges(); // Manually trigger change detection
    });
}

If you have set the changeDetection to ChangeDetectionStrategy.OnPush, automatic change detection is disabled, so you must initiate it yourself.

Answer 2

For updating your HTML, follow these steps:

Add this code to your component:

constructor(private cd: ChangeDetectorRef) {...}

ngOnInit(){
    this.serivce.something
        .subscribe( evt => {
            // Add logic here to update array values (logic is functioning)
            this.cd.detectChanges(); // Manually trigger change detection
    });
}

If you have set the changeDetection to ChangeDetectionStrategy.OnPush, automatic change detection is disabled, so you must initiate it yourself.

Answer 3

Answer №2

Angular includes two distinct ChangeDetectionStrategy options: Default and OnPush. The key distinction lies in the fact that OnPush is designed to work specifically with immutable objects and arrays. This means that it will only trigger change detection if it receives a new reference. As a result, it pairs perfectly with observables, allowing for efficient handling of variable changes by treating them as unique new objects rather than modifications to existing ones.

For instance:

@Component({
  ....
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyOnPushComponent {
 person:Person = {
    name: 'Tom',
    age: 15
}

changeName(){
   this.person.name='Ralf'; // This does not trigger the OnPush change detection because it maintains the same reference (which would have triggered it in Default mode)
}



  changePerson(){
       this.person={
        name: 'Ted',
        age: 20
    }; // OnPush change detection is triggered since it now refers to a new object
  }

}

Answer 4

Angular includes two distinct ChangeDetectionStrategy options: Default and OnPush. The key distinction lies in the fact that OnPush is designed to work specifically with immutable objects and arrays. This means that it will only trigger change detection if it receives a new reference. As a result, it pairs perfectly with observables, allowing for efficient handling of variable changes by treating them as unique new objects rather than modifications to existing ones.

For instance:

@Component({
  ....
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyOnPushComponent {
 person:Person = {
    name: 'Tom',
    age: 15
}

changeName(){
   this.person.name='Ralf'; // This does not trigger the OnPush change detection because it maintains the same reference (which would have triggered it in Default mode)
}



  changePerson(){
       this.person={
        name: 'Ted',
        age: 20
    }; // OnPush change detection is triggered since it now refers to a new object
  }

}

Issue with updating component

Answer №1

Answer №2

Similar questions

Tips for eliminating unnecessary module js calls in Angular 9

Using Vue.js 2 on multiple HTML pages with Typescript and ASP.Net Core

Ways to include various inputs with chip

Develop a Nativescript Angular component dynamically

There was a problem encountered while parsing the module due to an unexpected token. It appears that this file type requires a specific loader in order to be properly handled

Can the tiles in a grid-list be organized in a specific order?

The component 'Form' cannot be utilized in JSX because its return type, 'ReactNode', is not a valid JSX element

How can I retrieve a targeted set of information from Firebase Realtime Database?

Is there a way to adjust the font color when the expiration date passes?

Accessing a data property within an Angular2 route, no matter how deeply nested the route may be, by utilizing ActivatedRoute

Ways of utilizing a dynamic key for invoking a resource from prisma

Create the HTTP POST request body using an object in readiness for submission

What is the best way to manage errors and responses before passing them on to the subscriber when using rxjs lastValueFrom with the pipe operator and take(1

What steps do I need to follow to write this function in TypeScript?

Enhancing the session object with new properties

Stop unauthorized access to specific pages on ionic platform unless the user is logged in

Styling Form validation with Ant Design

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

Utilizing custom hooks for passing props in React Typescript

Next.js is faced with a frustrating issue where images and videos are failing to display