Angular 5 change detection on mutable objects

Question

I know this is a frequent question, but this is more related to Angular 5. From what I remember this used to work in Angular 2, unless I specify

changeDetection: ChangeDetectionStrategy.OnPush

Code:

  addFruit(food) {
    // this is not working
    this.fruits.push(food);

    // this works
    // this.fruits = [...this.fruits, food];
  }

Did something changed in Angular 5+ that the first method is no longer working?

Working example: https://stackblitz.com/edit/angular-ch-detec?file=app%2Fapp.component.ts

Ayman El Temsahi · Accepted Answer · 2018-01-25 15:24:24Z

2

That's because you're displaying the array in the view using {{ }}. Angular is checking for change in the fruits object. When you push to the array, the reference is the same but in the other method, you changed the reference so it's a new object. Try this in the view :

<p *ngFor='let fruit of fruits'>{{ fruit }}</p>

Or you can use json pipe like this :

{{ fruits | json }}

answered Jan 25, 2018 at 15:24

Ayman El Temsahi

2,6102 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 change detection on mutable objects

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related