title: How to trigger a change event manually - angular2
body: <p>Given the following components:</p>
  
  <pre><code>@Component({
      selector: 'compA',
      template:  template: `&lt;compB [item]=item&gt;&lt;/compB&gt;`
  })
  export class CompA {
      item:any;
      updateItem():void {
          item[name] = "updated name";
      }
  }
  
  @Component({
      selector: 'compB',
      template:  template: `&lt;p&gt;{{item[name]}}&lt;/p&gt;`
  })
  export class CompB implements OnInit{
      @Input() item: any;
      someArray: any[];
  
      ngOnInit():void {
          someArray.push("something");
      }
  }
  </code></pre>
  
  <p>As far as I understood that unless the complete <code>item</code> object is changed, angular2 does not recognize the changes on <code>item</code>. Therefore, I'd like to emit a change event manually for <code>item</code> when the <code>updateItem</code> method is called. And afterwards, make the child component i.e. <code>CompB</code> re-rendered as if angular detected a change in the regular way.</p>
  
  <p>Currently, what I have done is to implement the <code>ngOnInit</code> method of for <code>CompB</code> and call that method inside <code>updateItem</code> method through a <code>ViewChild</code> link. Another part of the story is that my actual source has objects like <code>someArray</code> which I'd like to be reset in each render. I'm not sure re-rendering resets <code>someArray</code> though. Currently, I'm resetting them in the <code>ngOnInit</code> method.</p>
  
  <p>So, my question is: how do I trigger re-rendering for changes on deeper elements of a parent object?</p>
  
  <p>Thanks</p>