Call a method when a certain property changes

Issue

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
  }
}    

Solution

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
  }
}

Answered By – Lukasz Gawrys

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0