title: Angular 6 : Real time data
body: <p>I have app in which a user can add a comment , and the comment is displayed , my problem is comments are not displayed untill I refresh the page.</p>
  
  <p>I want a comment to be displayed after the user click just enter or submit button</p>
  
  <p>Here is what I have so far: </p>
  
  <ol>
  <li><p>Getting data service.ts</p>
  
  <pre><code>this.activeRouter.params.subscribe((params) =&gt; {
    let id = params['id'];
    this.moviesService.getComments(id)
      .then(comments =&gt; {
        console.log(comments);
        this.comments = comments;
      });
  });
  </code></pre></li>
  </ol>
  
  <p>2.Then display to the front end: html</p>
  
  <pre><code>   &lt;div *ngFor="let comment of comments" class="col-md-7"&gt;
            &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item"&gt;Author: {{comment.author}}&lt;/li&gt;
              &lt;li class="list-group-item"&gt;Comments: {{comment.description}}&lt;/li&gt;
            &lt;/ul&gt;
            &lt;br&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately when my server updates the JSON, the html does not update at all until I refresh the page then I can see the added comments <strong><em>wrong</em></strong></p>
  
  <p>what am I missing in my code to accomplish what I want? newbie though</p>