Angular subscribe to @Input object change

Question

I have an object in my parent component that looks like this and is passed down to my child component (app-custom-component):

myObject = {
  name: 'John'
}
...
<app-custom-component [inputObject]="myObject"></app-custom-component>

And in my child component (app-custom-component) I do this:

@Input() inputObject;
displayName = '';

ngOnInit() {
  this.displayName = this.inputObject.name;
}
...
<label>{{displayName}}</label>

But when I change the myObject.name in the parent component it doesn't update the child component's displayName.

How can I make displayName update when I change myObject.name in the parent component?

https://stackblitz.com/edit/angular-mqiorv

It works just fine, open your console for errors.

Ashish Ranjan
– Ashish Ranjan

2018-12-07 09:57:37 +00:00
Commented Dec 7, 2018 at 9:57 — Ashish Ranjan
– Ashish Ranjan, Commented Dec 7, 2018 at 9:57

Sunil · Accepted Answer · 2018-12-07 09:58:54Z

5

It would be pretty easier with getter for displayName.

@Input() inputObject;

ngOnInit() {

}

get displayName(){
   return this.inputObject.name;
}

...

<label>{{displayName}}</label>

answered Dec 7, 2018 at 9:58

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

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

3 Comments

Freddy Bonda Over a year ago

Perfect thank you! Would you mind explaining how this works or referencing docs please? :)

Sunil Over a year ago

Getter will be called whenever Angular goes throgh Change Detection Process which ensure that latest changes are being reflected in the html template.

Freddy Bonda Over a year ago

I see. Thank you!

Sachila Ranawaka · Accepted Answer · 2018-12-07 09:59:18Z

3

Use getter and setter methods for inputs

@Input() 
get inputObject()  {
    return this.displayName;
}
set inputObject(value) {
     this.displayName = this.inputObject.name;
}

answered Dec 7, 2018 at 9:59

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Chronus · Accepted Answer · 2018-12-07 09:57:14Z

1

As far as I'm aware, onInit() only gets executed once, when the component is initialized. Try putting your code in the ngOnChanges() as well.

ngOnChanges() {
  this.displayName = this.inputObject.name;
}

answered Dec 7, 2018 at 9:57

Chronus

3013 silver badges17 bronze badges

1 Comment

Ashish Ranjan Over a year ago

He coould simply create a getter for display name istead

R. Viral · Accepted Answer · 2018-12-07 10:34:37Z

0

You can use ngOnChange() and track all changes of related @Input.

answered Dec 7, 2018 at 10:34

R. Viral

3961 silver badge6 bronze badges

Comments

Borys Kupar · Accepted Answer · 2018-12-07 11:36:00Z

0

I would recommend to avoid getter for this, so you don't have unnecessary re-rendering.

ngOnChanges(changes: SimpleChanges) {
  this.displayName = changes.inputObject.currentValue.name;
}

Make sure to implement OnChanges interface too.

answered Dec 7, 2018 at 11:36

Borys Kupar

1,73112 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular subscribe to @Input object change

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related