Detect changes in objects inside array in Angular2

by

In fact, you need to check differences for each object in the list not on the list itself. KeyValueDiffer must be applied on an object not on an array.

You could initialize an object containing all these KeyValueDiffer instances for the elements of your array:

constructor(private differs:  KeyValueDiffers) {
}

ngOnInit() {
  this.objDiffer = {};
  this.list.forEach((elt) => {
    this.objDiffer[elt] = this.differs.find(elt).create(null);
  });
}

Within the ngDoCheck, you need then to iterate over the differs to check there are changes (for each item of the array):

ngDoCheck() {
  this.list.forEach(elt => {
    var objDiffer = this.objDiffer[elt];
    var objChanges = objDiffer.diff(elt);
    if (objChanges) {
      objChanges.forEachChangedItem((elt) => {
        if (elt.key === 'prop1') {
          this.doSomethingIfProp1Change();
        }
      });
    }
  });
}

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

Notice that I skipped the change detection for the array… But both can be done in parallel. Moreover when elements are added / removed the list of KeyValueDiffers should be updated accordingly.

More Related Contents:

  1. How do I create a singleton service in Angular 2?
  2. Call child component method from parent class – Angular
  3. How can I unit test a component that uses the Router in Angular?
  4. document.getElementById replacement in angular4 / typescript?
  5. How to implement SignIn with Google in Angular 2 using Typescript
  6. localStorage is not defined (Angular Universal)
  7. Angular 6: saving data to local storage
  8. Page is part of the declarations of 2 modules: Error in ionic build prod
  9. Uncaught Error: Unexpected directive ‘MyComboBox’ imported by the module ‘AppModule’. Please add a @NgModule annotation
  10. Angular 2 Read More Directive
  11. Use nav.push with side menu in ionic 2
  12. When to use Interface and Model in TypeScript / Angular
  13. How to display the app version in Angular?
  14. Angular 4 checkbox change value
  15. Debug & Run Angular2 Typescript with Visual Studio Code?
  16. Angular @ViewChild() error: Expected 2 arguments, but got 1
  17. Best way to import Observable from rxjs
  18. Ionic2/Angular2 – Read a custom config file
  19. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  20. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  21. FormBuilder group is deprecated
  22. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  23. How to return observable from subscribe
  24. @Input() value is always undefined
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment