title: The Parent Variable is not updating in the child Component in Angular
body: <p>I have a variable in the parent component like this:</p>
  <p>ParentComponent</p>
  <pre><code>export class ParentComponent {
      
    variable = {};
    varExample = false;
    @ViewChild('child') child: ChildComponent;
    
    someFunction () {
      this.variable['id'] = {};
      for (let i = 0; i &lt; 10; i++) {
        this.variable['id'][i] = i*2; 
      }
      this.varExample = true;
    }
  
    otherFunction () { // called when i click a button
      this.someFunction ();
      
      console.log(this.child.variable); // {}
      console.log(this.child.varExample); // true
      this.child.initVars();
    }
  }
  </code></pre>
  <p>Parent HTML</p>
  <pre><code>&lt;app-child #child [variable]=&quot;variable&quot; [varExample]=&quot;varExample&quot;&gt;&lt;/app-child&gt;
  </code></pre>
  <p>ChildComponent</p>
  <pre><code>export class ChildComponent {
    @Input() variable: any;
    @Input() varExample: boolean;
  
    initVars() {
      console.log(this.variable); // {}
      console.log(this.varExample); // true
    }
  }
  </code></pre>
  <p>This is just an example of my implementation and yes I have all imports.</p>
  <p>In those <code>console.log(this.variable)</code> I got an empty object ( <code>{}</code> ), but varExample still works fine.
  Why is child's <code>variable</code> always empty, Angular doesn't detect changes in this type of Objects ( <code>{}</code> ) ?</p>
  <p>Can someone help me?</p>