Changing an @Input component object isn't reflected in parent component

Question

I have this component:

@Component({
    selector: 'child'
})
export class ChildComponent {
    @Input() childObject: ChildObject;

    changeObject(newObject: ChildObject){
        childObject = newObject;
    }
}

When I call changeObject, my ChildComponent reflect the changes, but my ParentComponent, which contains the ChildComponent, isn't updated with this change.

I.e.: If, in my ParentComponent template I have something like {{parent.childObject.name}}, this value stay unchanged.

I tried to use childObject = JSON.parse(JSON.stringify(newObject)); but it doesn't help. I guess it's a problem of object reference changing, so I added a method copy(newObject: ChildObject) that makes a copy property-by-property in my ChildObject class, but when I call it in my changeObject method, I get this error:

ERROR TypeError: _this.childObject.copy is not a function.

Update: ChildObject class

export class ChildObject {
  constructor(
    public name: string // , ...
  ) { }

  copy(childObject: ChildObject) {
    this.name = childObject.name;
    // ...
  }
}

You need to emit the changes back to parent - @Input() properties doesn't carry the reference — Rahul
– Rahul, Commented Nov 12, 2018 at 9:59

Artyom Amiryan · Accepted Answer · 2018-11-12 10:11:45Z

2

this will not work, you should use here service or @Output, I would suggest to use @Output here if there will be only this communication between your components

@Component({
    selector: 'child'
})
export class ChildComponent {
    @Input() childObject: ChildObject;
    @Output() onChildObjectChange = new EventEmitter<ChildObject>();
    changeObject(newObject: ChildObject){
        childObject = newObject;
        this.onChildObjectChange.emit(newObject);
    }
}

Parent component Html

<child (onChildObjectChange)="updateObject($event)"></child>

ts

updateObject(newObject: ChildObject) {
  childObject = newObject
}

edited Nov 12, 2018 at 10:11

answered Nov 12, 2018 at 10:03

Artyom Amiryan

2,9961 gold badge16 silver badges25 bronze badges

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

7 Comments

Sébastien Over a year ago

Hum... seems quite complex for something that should be automatic. In that case, I'd rather investigate my copy(newObject: ChildObject) solution in the ChildObject class that makes a property by property update. But I can't make out why I get this not a function error...

Artyom Amiryan Over a year ago

@Sébastien this is one of possible solutions, you can also use services, also can you provide code where you are getting not a function error so we can help in that case too

Sébastien Over a year ago

My ChildObject class is a quite simple model class, I updated my question with this class.

Artyom Amiryan Over a year ago

@sebastian when you are passing childObject from parent to child does it has the copy method? I would suggest to use services instead of that class

Sébastien Over a year ago

Isn't the method set at class level?

|

Manish Gharat · Accepted Answer · 2018-11-12 10:21:09Z

1

EDIT: A direct assignment will not work because it replaces original object reference with the new one

this.childObject = newObject; // Will not work

However, any update on an existing object should work

this.childObject.someProperty = newObject; // should work

Object.assign(this.childObject, newObject);  // should work since it will assign the merge to the first object

Should work since objects are passed as a reference while passing inputs. The only problem I see in the code you have posted is you should refer to the childObject as this.childObject

@Component({
    selector: 'child'
})
export class ChildComponent {
    @Input() childObject: ChildObject;

    changeObject(newObject: ChildObject){
        this.childObject = newObject;
    }
}

This should work. Although I would not do it this way. This can be done in a cleaner way.

edited Nov 12, 2018 at 10:21

answered Nov 12, 2018 at 10:09

Manish Gharat

4202 silver badges10 bronze badges

10 Comments

Sébastien Over a year ago

I just forgot this while typing my exemple, but it is in place in my accual code and no it doesn't work. Why do you think it isn't a clean way? It looks to me quite simple and maintainable.

Manish Gharat Over a year ago

'@Input' should be used to pass data from parent to child and not the other way around. If you want to pass data from child to parent component, you should use '@Output', ValueAccessor or service. I do not recommend using service as well but it's an option.

Sébastien Over a year ago

Well, this is only model data for my form, so the changes are always sent back to the parent components. The reason why i have this object copy is that the user can select the ChildObject in a list to auto-complete the form.

Sébastien Over a year ago

Yes, this works. Simple and clean (I guess). Do you know what Object.assign does to refererences type (i.e., if I have other complex objects in ChildObject)? Are the object references copied to the object or is it a recursive copy?

Manish Gharat Over a year ago

It's a recursive copy. If I have 2 objects obj1 and obj2 and I do Object.assign(obj1, obj2), it will copy all properties from obj2 to obj1 and these copied properties will no longer have reference to obj2. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

|

Rahul · Accepted Answer · 2018-11-12 10:21:36Z

0

You can possiable get the value changed by adding ChangeDetectionStrategy.OnPush on your child

@Component({
    selector: 'child',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
    @Input() childObject: ChildObject;

    changeObject(newObject: ChildObject){
        childObject = newObject;
    }
}

This will update your object whenever there is any event triggering on your child component the case is that both the child component and parent component changeDetection will occur and thus it will update your object

Hope you're expecting something like this - Happy coding !!

answered Nov 12, 2018 at 10:21

Rahul

2,1382 gold badges14 silver badges30 bronze badges

1 Comment

Rahul Over a year ago

Some event should be triggered to achieve this - if not change it to default ChangeDetectionStrategy.Default which will trigger every time without event change

Collectives™ on Stack Overflow

Changing an @Input component object isn't reflected in parent component

3 Answers 3

7 Comments

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related