Best way to update a child component is: ngOnChanges()
ngOnChanges(): “A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes.” We use this lifecycle hook to respond to changes to our @Input() variables.
Example:
import { Component, Input, OnChanges } from "@angular/core";
@Component({
selector: "child-component",
templateUrl: "./child-component.html"
})
export class MyComponent implements OnChanges {
@Input() someInput: string;
constructor() {}
ngOnChanges() {
/**********THIS FUNCTION WILL TRIGGER WHEN PARENT COMPONENT UPDATES 'someInput'**************/
//Write your code here
console.log(this.someInput);
}
}
Use child component inside parent component as follows
<child-component [someInput]="inputValue"></child-component>