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

Answer 1

It would be pretty easier with getter for displayName.

@Input() inputObject;

ngOnInit() {

}

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

...

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

Answer 2

Use getter and setter methods for inputs

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