Angular 8 change detection not working for mutable objects

Question

When I make a change to a property of an object, Angular's default change detection is not working:

@Component({
    selector: 'parent-comp',
    template: `<child-comp [mutableObject]="mutableObject"></child-comp>`
})
export class ParentComp implements OnInit {

    mutableObject: MutableObject = { someProp: 'hello' };

    onClickedSomething() {
        this.mutableObject.someProp = 'goodbye';
    }
}

@Component({
    selector: 'child-comp',
    template: `<h1>{{ mutableObject.someProp }}</h1>`
})
export class ChildComp implements OnInit, OnChanges {

    @Input() mutableObject: MutableObject;

    ngOnInit() {}

    ngOnChanges(changes: SimpleChanges) {
        console.log('change detected');
    }
}

ngOnInit gets called in child component the first time both parent and child components load, but when onClickedSomething() method changes the property value, the child component doesn't detect the change. I made sure that ChangeDetectionStrategy.OnPush is not being used. What could be going wrong here?

Barremian · Accepted Answer · 2020-11-13 15:50:21Z

3

Nothing is going wrong here. Like you say, the underlying reference to the object isn't changed. So Angular doesn't honour the change in object properties. Try to force it using the spread operator and reassign the variable.

export class ParentComp implements OnInit {
  mutableObject: MutableObject = { someProp: 'hello' };

  onClickedSomething() {
    this.mutableObject = { ...this.mutableObject, someProp: 'goodbye' };
  }
}

Obviously the spread operator in the assignment is redundant here since the object contains only one property. But it'll be required when there are multiple properties and you wish to change only few of them.

answered Nov 13, 2020 at 15:50

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

3 Comments

u84six Over a year ago

This was just a quick sample of what I'm doing. In reality, the object that's changing is quite deep, so it would be a shame if I had to do a deep clone of the object every time one if its properties change. I would like to retain all the property values that haven't changed.

Barremian Over a year ago

Exactly the reason for the spread operator. It'll retain all the values except the ones that are changed explicitly.

u84six Over a year ago

I've got a question about this. Let's say that the mutable object holds properties that other components use. How would I know which properties changes specifically for each component? Rather than passing down the whole object, would it be best to just pass the properties that are needed?

Collectives™ on Stack Overflow

Angular 8 change detection not working for mutable objects

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related