detect change of nested property for component input

by

In fact, by default Angular2 detects changes when object reference is updated not its content. But this default behavior can be changed by using the DoCheck interface.

In your case (detecting that a property was updated into the myObject object, you could use the following approach:

@Component({
  selector: 'my-component',
  (...)
}) 
export class MyComponent implements DoCheck {
  @Input() myObject: MyObject;
  differ: any;

  constructor(differs:  KeyValueDiffers) {
    this.differ = differs.find([]).create(null);
  }

  ngDoCheck() {
    var changes = this.differ.diff(this.myObject);

    if (changes) {
      changes.forEachChangedItem((elt) => {
        if (elt.key === 'prop1') {
          this.doSomethingIfProp1Change();
        }
      });
    }
  }

  doSomethingIfProp1Change() {
    console.log('doSomethingIfProp1Change');
  }
}

When the value of the prop1 property is updated, the doSomethingIfProp1Change method is called.

See this plunkr: http://plnkr.co/edit/uvOKMXQa9Ik8EiIhb60Y?p=preview.

More Related Contents:

  1. *ngFor running an infinite loop in angular2
  2. Angular 2 custom form input
  3. How to get query params from url in Angular 2?
  4. How to inject Document in service?
  5. Angular 2 Show and Hide an element
  6. WARNING: sanitizing unsafe style value url
  7. Angular 2: Convert Observable to Promise
  8. Angular2: How to load data before rendering the component?
  9. Angular2 – should private variables be accessible in the template?
  10. How to prepare release version with SystemJS and Gulp?
  11. Angular2 canActivate() calling async function
  12. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  13. How to display json object using *ngFor
  14. Angular 2 View will not update after variable change in subscribe
  15. Angular no provider for NameService
  16. Angular2 – Share data between components using services
  17. Accessing a property in a parent Component
  18. TypeScript error in Angular2 code: Cannot find name ‘module’
  19. Integrating Material Design Lite with Angular2
  20. Visual Studio Code Automatic Imports
  21. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  22. Get route query params
  23. Angular 2 ngModel in child component updates parent component property
  24. RxJs Array of Observable to Observable of Array
  25. How to implement Custom Async Validator in Angular2/4/5
  26. Import gapi.auth2 in angular 2 typescript
  27. Angular 2 loader on each http request
  28. What exactly $event object do in Angular 2?
  29. How to place a dynamic component in a container
  30. Access Meta-Annotation inside Class (TypeScript)

Leave a Comment