title: angular10: How to detect complex input object in array change
body: <p>I have an array that I use <code>DoCheck</code> and IterableDiffer to listen to changes in my code. When the array is changed, but when a property inside one of the objects in the array changes I don't get notified. I tried using <code>KeyValueDiffer</code> for each object in the array <code>types</code> but it doesn't work in <code>ngDoCheck</code>. Any ideas?</p>
  <p>In the parent:</p>
  <pre><code>&lt;comp [types]=&quot;types&quot;&gt;&lt;/comp&gt;
  </code></pre>
  
  <pre><code>readonly: boolean =  false;
  
  types: {
    readonly: boolean;
    title: string;
    value: any;
  }[] = [{
    title: 'title1',
    readonly: this.readonly,
    value: 1
  }, {
    title: 'title2',
    readonly: this.readonly,
    value: 2
  }];
  
  ngOnInit() {
      setTimeout(() =&gt; {
        this.readonly = true;
      }, 5000)
  }
  </code></pre>
  <p>In component <code>comp</code>:</p>
  <pre><code>constructor(
      private differsService: KeyValueDiffers
  ) {};
  
  @Input() types: any[] = [];
  
  ngOnInit() {
      this.differ = this.searchTypes.reduce((t, c, i) =&gt; {
        t[`types_${i}`] = this.differsService.find(c).create();
        return t;
      }, {});
  }
  
  ngDoCheck(): void {
      if (this.differ) {
        Object.keys(this.differ).map((key: string) =&gt; {
          const k = key.split('_');
          const state = k.length === 1?this[k[0]]:this[k[0]][k[1]];
          const changes = this.differ[key].diff(state);
          if (changes) {
            console.log(key, changes);
          }
        })
      }  
  }
  </code></pre>