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?

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ — Nishan Dhungana, Mar 31 '19 at 09:41

score 9 · Accepted Answer · answered Mar 31 '19 at 09:43

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.

score 7 · Answer 2 · edited Apr 01 '19 at 12:58

There is another option without OnChanges.

@Component({
    selector: 'app-child',
    template: '<div></div>'
})
export class AppChildComponent {
    private _idElement: number;

    get idElement(): number {
        return this._idElement;
    }

    @Input('idElement') set idElement(value: number) {
        if (value) {
            this._idElement = value;
            this.getSpecs();
        }
    }
}

Hope this helps! :)

score 1 · Answer 3 · answered Mar 31 '19 at 09:53

You can try these one

Import OnChanges from angular core package in your child component

import { Component, Input, OnChanges , SimpleChanges} from '@angular/core';
Implement you child class like

export class YourComponent implements OnChanges

Create OnChanges method like

ngOnChanges(changes:SimpleChanges){
  console.log(changes.your input property name);
 // implement your logic here  
}

Whenever you have changes in parent component it will affect in child component

Trigger function on @Input() changed

3 Answers3