why is child not detecting change from parent input in angular

Question

I have a child component

parent.component.html

 <child-component (changeVal) = "parentObj"></child-component>

parent.component.ts

parentObj = {
  someDate = new Date()
}
// function changing the parentObj
callOnClick() {
   this.parentObj.someDate = new Date('20 June 2018'); 
}

child component.ts

@Input('changeVal')
ngOnChanges() {
 // console i never see
 console.log('parentObj Changed and got me here');
}

Why is the onChanges hook not running in this case? I am changing the input value inside the callOnClick method, isn't it supposed to fire when the value of changeVal is changed ?

Thanks for the simple solution, Ravi. KUDOS!

Mohit Dixit
– Mohit Dixit

2020-06-04 11:56:02 +00:00
Commented Jun 4, 2020 at 11:56 — Mohit Dixit
– Mohit Dixit, Commented Jun 4, 2020 at 11:56

score 6 · Accepted Answer · 2018-06-15 10:11:32Z

6

<child-component (changeVal) = "parentObj"></child-component>

changeVal is an input in your code, but an output in your HTML. Consider using this instead :

<child-component [changeVal] = "parentObj"></child-component>

And declare a variable as an input, not your function.

@Input() changeVal: any;

edited Jun 15, 2018 at 10:11

answered Jun 15, 2018 at 9:40

user4676340

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

2 Comments

Ravi Yadav Over a year ago

Still can't see the console message.

user4676340 Over a year ago

Declare a variable after your decorator, functions aren't input, especially lifecycle functions

lifetimeLearner007 · Accepted Answer · 2018-06-15 09:47:37Z

3

If I'm not mistaken, you're trying to pass an object from parent to child.

parentObj is a property. Use property binding using square brackets as follows:

<child-component [changeVal] = "parentObj"></child-component>

Also, in child.component.ts, you have to provide @Input() decorator to a property not a method.

    @Input('changeVal') changeVal = {};
    ngOnChanges() {
      // console i never see
      console.log('parentObj Changed and got me here');
    }

answered Jun 15, 2018 at 9:47

lifetimeLearner007

6537 silver badges18 bronze badges

Comments

jawher zagrouba · Accepted Answer · 2022-12-30 15:04:13Z

0

you could use the speard operator " ... " to force change detection

syntax is as follows

this.object = {...this.object};

answered Dec 30, 2022 at 15:04

jawher zagrouba

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

why is child not detecting change from parent input in angular

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related