Angular 2: How to detect changes in an array? (@input property)

by

OnChanges Lifecycle Hook will trigger only when input property’s instance changes.

If you want to check whether an element inside the input array has been added, moved or removed, you can use IterableDiffers inside the DoCheck Lifecycle Hook as follows:

constructor(private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = iterableDiffers.find([]).create(null);
}

ngDoCheck() {
    let changes = this.iterableDiffer.diff(this.inputArray);
    if (changes) {
        console.log('Changes detected!');
    }
}

If you need to detect changes in objects inside an array, you will need to iterate through all elements, and apply KeyValueDiffers for each element. (You can do this in parallel with previous check).

Visit this post for more information: Detect changes in objects inside array in Angular2

More Related Contents:

  1. Angular 7 go offline?
  2. How to add number with variable name? [duplicate]
  3. typescript anonymous object with variable based label value
  4. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  5. How do I download a file with Angular2 or greater
  6. (change) vs (ngModelChange) in angular
  7. Angular4 – No value accessor for form control
  8. Typescript Type ‘string’ is not assignable to type
  9. Angular 2 Karma Test ‘component-name’ is not a known element
  10. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  11. How to do the chain sequence in rxjs
  12. Angular 6: How to set response type as text while making http call
  13. using external JS libraries in my angular 2 project
  14. Angular 2 – communication of typescript functions with external js libraries
  15. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  16. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  17. Is it a good practice using Observable with async/await?
  18. How to check for isBrowser in Angular 4
  19. Unraveling Angular 2 book, Chapter 1, Example 5
  20. Angular 2 Component @Input not working
  21. Highlight the search text – angular 2
  22. Cast int to enum strings in Typescript
  23. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  24. How to loop over object properties with ngFor in Angular
  25. Converting an image to base64 in angular 2
  26. how to define index in angular material table
  27. Subscribe to observable is returning undefined
  28. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  29. Google Sign-In for Websites and Angular 2 using Typescript
  30. binding data to angular checkbox

Leave a Comment