I have a method I want to run anytime a certain property in my component changes. The value comes from an Input from another component.
Whenever myValue changes I would like to call the myMethod method.
@Component({
selector: 'my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {
@Input() myValue: any;
myValue: any;
constructor() {}
private myMethod() {
// Called when this.myValue changes
}
}
You can achieve it using the ngOnChanges lifecycle hook or using a setter combined with @Input
Here is the solution with ngOnChanges
import { OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.component.scss'],
})
export class MyComponent implements OnChanges {
@Input() myValue: any;
constructor() {}
ngOnChanges(changes: SimpleChanges) {
if(changes && changes.myValue) {
this.myMethod();
}
}
private myMethod() {
// Called when this.myValue changes
}
}
And here with the setter.
@Component({
selector: 'my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {
private _myValue: any;
@Input() set myValue(value: any) {
this._myValue = any;
this.myMethod();
}
get myValue(): any {
return this._myValue;
}
constructor() {}
private myMethod() {
// Called when this.myValue changes
}
}