title: Two Way Binding on an Angular 2+ Component
body: <p>I have an Ionic application where I have created a component to show some data of an object. My problem is that when I update the data in the parent that hosts the component the data within the component does not update:</p>
  
  <p>my-card.component.ts</p>
  
  <pre><code>@Component({
      selector: 'my-card',
      templateUrl: './my-card.html'
  })
  export class MyCard {
      @Input('item') public item: any;
      @Output() itemChange = new EventEmitter();
      constructor() {
  
      }
  
      ngOnInit() {
          // I do an ajax call here and populate more fields in the item.
          this.getMoreData().subscribe(data =&gt; {
              if (data.item){
                  this.item = data.item;
              }
              this.itemChange.emit(this.item);
          });
      }
  }
  </code></pre>
  
  <p>my-card.html</p>
  
  <pre><code>&lt;div class="comment-wrapper" *ngFor="let subitem of item.subitems"&gt;
      {{subitem.title}}
  &lt;/div&gt;
  </code></pre>
  
  <p>And in the parent I use the component like this:</p>
  
  <pre><code>&lt;my-card [(item)]="item"&gt;&lt;/my-card&gt;
  </code></pre>
  
  <p>And the ts file for the parent:</p>
  
  <pre><code>@IonicPage()
  @Component({
      selector: 'page-one',
      templateUrl: 'one.html',
  })
  export class OnePage {
      public item = null;
      constructor(public navCtrl: NavController, public navParams: NavParams) {
          this.item = {id:1, subitems:[]};
      }
  
      addSubItem():void{
          // AJAX call to save the new item to DB and return the new subitem.
          this.addNewSubItem().subscribe(data =&gt; {
              let newSubItem = data.item;
              this.item.subitems.push(newSubItem);
          }
      }
  }
  </code></pre>
  
  <p>So when I call the addSubItem() function it doesnt update the component and the ngFor loop still doesnt display anything.</p>