title: Angular5 bind and update instance in child component
body: <p>I have some trouble updating an object instance on a child component. Here's the object class:</p>
  
  <pre><code>class MyObject {
      elementList : Array&lt;any&gt; = [
          { id: 1, text: "Hello world"}
      ];
  }
  </code></pre>
  
  <p>The main component:</p>
  
  <pre><code>export class PageComponent implements ... {
      myObject: any = new MyObject();
  
      constructor(...) {}
  
      reload() {
          this.getDataFromAPI.subscribe(data =&gt; {
              this.myObject.elementsList = data;
          });
      }
  }
  </code></pre>
  
  <p>Main component template:</p>
  
  <pre><code>&lt;div&gt;
      &lt;child-component [list]="myObject"&gt;&lt;/child-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>export class ChildComponent implements OnChanges, ... {
      @Input list: any;
  
      constructor(...) {}
  
      ngOnChanges(changes: SimpleChanges) {
          if (changes.list) {
              this.list = changes.list.currentValue;
          }
      }
  }
  </code></pre>
  
  <p>And the child component template shows a list of elements in myObject.elementsList.</p>
  
  <p>If i try to push/change elements in elementsList from the PageController they don't update in the child (but if i implement all the code in the PageController it works great). I found that if i substitute the entire instance in the PageController with a new one, it updates also the child, but i want to know is there is a better way to achieve this.</p>
  
  <p>I'd like not to re-instantiate the object every time i need to refresh my list. How can i update the instance data and reflect it to the child?</p>