title: How to detect changes when component Input is an array of nested objects?
body: <p>I'm developing an Angular app and I would use <code>ngOnChanges</code> to get notified when the Input of a component changes. In my case it is not fired because I have an array of nested object as Input for the component.</p>
  
  <p>I have a component with a form in which I use two sub-components that use two <code>FormControl</code> of the same parent <code>FormGroup</code>. I pass the <code>value</code> of the first formControl to the second sub-component, but since no change detection occurs on array modification I can't get the new values in the Input of the second sub-component.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>@Component({
      encapsulation: ViewEncapsulation.None,
      moduleId: module.id,
      selector: 'my-component',
      templateUrl: 'my-component.html',
      styleUrls: ['my-component.scss']
  })
  export class MyComponent {
      myForm: FormGroup;
  
      constructor(private fb: FormBuilder) {
          this.myForm = fb.group({
              documents: null,
              summary: null
          });
      }
  }
  </code></pre>
  
  <p>Here is the template file:</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;form class="ui form" [formGroup]="myForm"&gt;
          &lt;my-component-child-one [form]="myForm.get('documents')"&gt;&lt;/my-component-one&gt;
  
          &lt;my-component-child-two [form]="myForm.get('summary')" [content]="myForm.get('documents').value"&gt;&lt;/my-component-two&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any change made in the form control of the first sub-component does not trigger <code>ngOnChanges</code> of the second sub-component, because it binds the array reference instead of array content. So any change made to any object of the array or any change made to the array itself doesn't change the array reference and then <code>ngOnChanges()</code> will not be called.</p>
  
  <p>A possible solution may be using <code>ngDoCheck</code>. but it could have a frightful cost because it is called with enormous frequency. It becomes heavy even because I should use <code>IterableDiffers</code> and <code>KeyValueDiffers</code>.</p>
  
  <p>Another solution could be subscribing to <code>valueChanges</code> of the first formControl, but I cannot figure out why it seems not to work propertly, sometimes it misses some changes...</p>
  
  <p>What could be the best solution in my case?</p>