Angular 4: how to react to @input variable changes [duplicate]

Question

I have an input variable called model for childComponent. @Input () model: any;

I have a parent control parentControl that send the updated input variable to childComponent.

How do I code childComponent to react to model changes? I want a childComponent call made when model changes.

Thoughts?

This is, unsurprisingly, in the docs: angular.io/guide/component-interaction — jonrsharpe
– jonrsharpe, Commented Aug 16, 2017 at 16:55

Sajeetharan · Accepted Answer · 2017-08-16 16:55:45Z

7

Consider using ngOnChanges() lifecycle

@Input() model: any;
ngOnChanges(model: any) {
    this.doSomething(model);
}

answered Aug 16, 2017 at 16:55

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

5 Comments

reza Over a year ago

and if there are multiple input parameters will I have one ngOnChanges for each input variable?

Sajeetharan Over a year ago

yes you need to do that, there is no such watchgroup in angular2 like we have in angularjs

jonrsharpe Over a year ago

@reza no, you don't, the argument to the single ngOnChanges method is actually SimpleChanges, which contains the changes to any of the inputs. You can see this in the docs linked, not sure why the author is saying otherwise.

Sajeetharan Over a year ago

@reza yes, you are right! actually i was mentioning about using a set_method , in that case you need separate ones. but ngOnchanges usually give whatever the inputs if they are changed. sorry i have not read your comment properly. angular.io/api/core/OnChanges

anothercoder Over a year ago

This is close, but is not actually correct. I will give an example with a boolean data binding ``` @Input() yourData: boolean; ngOnChanges(changes: SimpleChanges) { console.log('changes: ', changes); // this will console out all of the changes it detected. console.log('changes.yourData: ', changes.yourData); // this will console out yourData old and yourData new. } ``` the changes.yourData would output like this in console. ``` changes.yourData: { currentValue: true, firstChange: false, previousValue: Undefined } ``` previousValue will update on second change

Collectives™ on Stack Overflow

Angular 4: how to react to @input variable changes [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related