Change detection not registering data changes

Question

I have an html structure with a component inside a component (forgot the proper word for it).

working basicly like this (largely simplified):

main html:

<div *ngFor="let item of data">
  <app-item [item]="item"></app-item>
</div>

<button (click)="addItem()">Add</button>

item html:

<div>{{item.name}}</div>

<button (click)="deleteItem()">Delete</button>

inside the app-item I display several items out of a list. The list gets it's data straight out of the database via an http.get request.

Now I also have functionality to add or delete items which both work (items get added or removed respectively to or from the database just fine). Though the change detection does not pick any of it up and the site needs to be refreshed (via F5 for example) to display the changes.

I checked the code (not all of it is from me) and couldn't find any specified change detection strategie.

I also tried to manually tigger change detection from the add and delete function via the ChangeDetectorRef (this.ref.detectChanges();). Though that also did not take away the need to manually refresh the page to see the changes.

Now what am I missing for change detection to pick this up? Or alternatively, how can I manually trigger it within my add/delete methods?

Answer 1

Since you are adding or deleting element in existing array angular is not able to pick the changes.

For this to work you can do like

• assign array reference with new object of same elements of array as items= items.slice();
• Or you can use Object.assign method as items= Object.assign([],items);
• Both the things should be done after making changes to the array.

To manually fire change detection you can follow answer on this link:-

Inject ChangeDetectorRef in your component and then use detectChanges() method of that object to fire change detection manually. Like

constructure(private cd: ChangeDetectorRef()){}
someMethod(){
    cd.detectChanges();
}

Answer 2

If you use a spread operator instead of push it should work.

this.data = [...this.data, newItem];

The reason for this is that angular detects a change when the whole object changes, or the reference changes, so a mutation isn't going to trigger it. So rather than mutating the array, you need to make it a new array.

Answer 3

Add ChangeDetectionStrategy this might solve your issue, but in genral it should be picked up Angular might be something else bugging your code

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MovieComponent {
  // ...
}