title: Update a list based on input field
body: <p>I want to update a simple list based on input into a form field. Right now I have some dummy data setup:</p>
  
  <pre><code>protected comments: any = [
      {
          "id": "123",
          "date": "1511545812",
          "author": "rockwcl1",
          "message": "This is a message"
      },
      {
          "id": "1232",
          "date": "1511545812",
          "author": "rockwcl1",
          "message": "This is another message"
      }
  ]
  
  getComments() {
      return this.comments;
  }
  
  addComment(comment: any) {
      this.comments.push(comment);
      console.log(this.comments);
  }
  </code></pre>
  
  <p>My parent component:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {IonicPage, NavController, NavParams} from 'ionic-angular';
  import {Comment} from "../../comments/comment.service";
  
  @IonicPage()
  @Component({
      selector: 'page-event-discussion',
      templateUrl: 'event-discussion.html',
      providers: [
          Comment
      ]
  })
  export class EventDiscussionPage {
      event: any;
      comments: any;
      constructor(public navCtrl: NavController, public navParams: NavParams, private _commentApi: Comment) {
          this.event = this.navParams.data.event;
          this.comments = this._commentApi.getComments();
      }
  }
  </code></pre>
  
  <p><strong>event-discussion.html</strong></p>
  
  <pre><code>&lt;!-- removed some header stuff --&gt;
  &lt;ion-content padding&gt;
     &lt;comment-thread [comments]="comments"&gt;&lt;/comment-thread&gt; 
  &lt;/ion-content&gt;
  
  &lt;ion-footer&gt;
    &lt;ion-toolbar&gt;
      &lt;comment-form&gt;&lt;/comment-form&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-footer&gt;
  </code></pre>
  
  <p>In my parent component, I pull in that dummy data and then pass it to a child:</p>
  
  <pre><code>&lt;comment-thread [comments]="comments"&gt;&lt;/comment-thread&gt;
  </code></pre>
  
  <p><strong>comments-thread.ts</strong></p>
  
  <pre><code>import {Component, Input} from '@angular/core';
  
  @Component({
      selector: 'comment-thread',
      templateUrl: 'comments-thread.html'
  })
  export class CommentsThreadComponent {
      @Input() comments: any[];
      constructor () {}
  }
  </code></pre>
  
  <p><strong>comments-thread.html</strong></p>
  
  <pre><code>&lt;ion-item *ngFor="let comment of comments"&gt;
    &lt;comment [comment]="comment"&gt;&lt;/comment&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p><strong>comment.component.ts</strong></p>
  
  <pre><code>import {Component, Input} from '@angular/core';
  import { Comment } from '../comment.service'
  
  @Component({
      selector: 'comment',
      template: '{{ comment.message }}'
  })
  export class CommentComponent {
      @Input() comment: any;
  }
  </code></pre>
  
  <p><strong>comment-form.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {Comment} from '../comment.service';
  import {Validators, FormBuilder, FormGroup } from '@angular/forms';
  
  @Component({
      selector: 'comment-form',
      providers: [
          Comment
      ],
      template: `
        &lt;form [formGroup]="_commentForm" (ngSubmit)="addComment()" (ngModel)="comments"&gt;
          &lt;ion-item&gt;
            &lt;ion-input 
              type="text" 
              placeholder="Write a comment"
              formControlName="message"
              [(ngModel)]="newComment"&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
              &lt;button ion-button type="submit" [disabled]="!_commentForm.valid"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      `
  })
  export class CommentForm {
      private _commentForm: FormGroup;
  
      constructor ( private _formBuilder: FormBuilder, private _CommentApi: Comment) {
          this._commentForm = this._formBuilder.group({
              message: ['', Validators.required],
          })
      }
  
      addComment() {
          this._CommentApi.addComment({
              "id": "adsfa",
              "date": "1234455543",
              "author": "rockwcl1",
              "message": this._commentForm.value.message
          });
      }
  
  }
  </code></pre>
  
  <p>I only recently started trying to figure out if <code>[(ngModel)]</code> is what I needed.</p>
  
  <p>So, what's happening right now:</p>
  
  <ul>
  <li>When initially viewing the page I see list containing the first two comments just fine</li>
  <li>When I add a comment via the form, it is correctly <code>push</code>ed (I see them using <code>console.log()</code></li>
  <li>The list of comments is not updated</li>
  </ul>
  
  <p>I guess I just expected magic - I updated the data so the list would update.  What about this do I need to change in order to update the list when I new item is pushed?</p>
  
  <p>[Edit: a link to a youtube video showing the <code>console.log</code> when a new comment is added: <a href="https://www.youtube.com/watch?v=NxHuDbcwvEE]" rel="nofollow noreferrer">https://www.youtube.com/watch?v=NxHuDbcwvEE]</a></p>