Trigger function on @Input() changed

Question

I have a parent component with the following code in the parent.component.html:

<app-child [idElement]=(idElement)></app-child>

In the child component, I have the input parameter like this:

@Input() idElement : number;

And also a function called

getSpecs()

I want the getSpecs() function to be executed by the child when the input is modified by the parent. Is that possible?

Answer 1

For that purpose, you have to use the Angular lifecycle hook ngOnChanges.

In your case it would be something like:

ngOnChanges(changes: SimpleChanges) {
    if (changes['idElement']) {
        // Do your logic here
        this.getSpecs()
    }
}

The documentation is here.