0

I am listening to changes on an object property with help of ngDoCheck The implementation is like below

differ: any;
pageSettings:SelectionSettings;

where SelectionSettings is

export interface SelectionSettings {
  boolPpt: boolean;
  maxRows: number;
  startIndex:number;
  valuesToSelect: Colum[];  
}

The property valuesToSelect is an array of items and is dynamic in nature. [ Items can be added to removed from the list as well as items can be updated ]

ngDoCheck initialization is like below

  constructor(  private differs: KeyValueDiffers) {
    this.differ = differs.find({}).create();  
    this.initializeSettings();
  }


  ngDoCheck() {
    var changes = this.differ.diff(this.pageSettings);
    if (changes) {
      console.log('changes detected');
      changes.forEachChangedItem(r => console.log('changed ', r.currentValue));
      changes.forEachAddedItem(r => console.log('added ' + r.currentValue));
      changes.forEachRemovedItem(r => console.log('removed ' + r.currentValue));
    } else {
      console.log('nothing changed');
    }
  }
  


initializeSettings() {

this.pageSettings = {
  boolPpt: false,
  maxRows: 100,
  startIndex: -1,      
  valuesToSelect: [
    {
      name: "sadsa",
      index: -1,
      type: "string",
      bgcolor:"#0000CD"
    },
    {
     name: "xxzc",
      index: -1,
      type: "string",
      bgcolor:"#1000CD"
    }        
  ]
}

}

The updation of pageSettings occured at different places inside component, like on click event of a table cell or checkbox change event etc

This is firing for all changes of properties except array valuesToSelect . Whenever I am adding new items or remove items of the property SelectionSettings.valuesToSelect , the changes are getting detected.But if we make an updation of already existing item inside SelectionSettings.valuesToSelect , ngDoCheck is not detecting any changes.

How can i detect or listen to changes of all properties of SelectionSettings along with child array properties

Sebastian
  • 4,625
  • 17
  • 76
  • 145
  • I'm assuming you're passing values from the parent component. I'd save valuesToSelect into private variable in child component and would use @Input Setter method. Inside setter overwrite private variable using slice() or '...' operator to make sure change detection is trigerred. Angular change detection will be triggered only if reference to object is changed. If not, then everytime you change object use this.valuesToSelect=valuesToSelect.slice() to trigger change detection. Let me know if it works for you or edit your answer explaining the problem in more detail – michal.materowski Jul 15 '21 at 14:45
  • No variable pageSettings is initialized inside constructor of component The question is edited with a part of initialization – Sebastian Jul 15 '21 at 14:57
  • Could you explain how do you change it and try out if reassigning the whole object triggers change detection this.pageSettings.valuesToSelect= newValues? – michal.materowski Jul 15 '21 at 15:02
  • This updations occured at various places. Like on click on some table cells / some checkboxes etc – Sebastian Jul 15 '21 at 15:03
  • In those places could you try to reassign whole array like mentioned in above comment? – michal.materowski Jul 15 '21 at 15:03
  • i am trying to update just the needed property and leave all other properties as before on all the events. The problem is occuring only for property of array of items – Sebastian Jul 15 '21 at 15:05
  • That's where your problem is. You have to trigger change detection manually or replace the whole object, otherwise change detection cycle won't be triggered. See https://www.mokkapps.de/blog/the-last-guide-for-angular-change-detection-you-will-ever-need#input-reference-changes – michal.materowski Jul 15 '21 at 15:07
  • Does this answer your question? [Change detection not registering data changes](https://stackoverflow.com/questions/45499982/change-detection-not-registering-data-changes) – michal.materowski Jul 15 '21 at 15:11

0 Answers0