title: Data only displayed after refresh
body: <p>I am creating comments section in my app, when a user enter a comments and submit, comment should imeaditely be displayed in front end, unfortunately now comments are only visible after refresh, </p>
  
  <p>Here is what I have : </p>
  
  <blockquote>
    <p>Displaying comments</p>
  </blockquote>
  
  <p>component.ts</p>
  
  <pre><code>  ngOnInit() {
         this.activeRouter.params.subscribe((params) =&gt; {
        // tslint:disable-next-line:prefer-const
        let id = params['id'];
        this.moviesService.getComments(id)
          .subscribe(comments =&gt; {
            console.log(comments);
            this.comments = comments;
          });
      });
  }
  </code></pre>
  
  <p>service.ts</p>
  
  <pre><code> getComments(id: string): Observable&lt;any&gt; {
      const url = `${apiUrl + this.commentsUrl}/${id}`;
      return this.http.get(url, httpOptions).pipe(
        map(this.extractData),
        catchError(this.handleError));
    }
  </code></pre>
  
  <p>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>**</p>
  
  <blockquote>
    <p>Adding comments:</p>
  </blockquote>
  
  <p>**
  service.ts</p>
  
  <pre><code>  // Adds comments
        addReview(author, description) {
          const uri = 'http://localhost:8000/movies/comments';
          const obj = {
            author: author,
            description: description
          };
          return this.http.post(uri, obj);
        }
  </code></pre>
  
  <p>compo.ts</p>
  
  <pre><code>  createForm() {
      this.angForm = this.fb.group({
        author: ['', Validators.required],
        description: ['', Validators.required]
      });
    }
    addReview(author, description) {
      this.moviesService.addReview(author, description).subscribe(success =&gt; {
        this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
      }, error =&gt; {
        this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
      });
    }
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="col-md-7 movie-form" &gt;
            &lt;flash-messages&gt;&lt;/flash-messages&gt;
            &lt;form [formGroup]="angForm" novalidate&gt;
              &lt;div class="form-group"&gt;
                &lt;label class="col-md-4"&gt;Author&lt;/label&gt;
                &lt;input type="text" class="form-control" name="author" formControlName="author" #author /&gt;
              &lt;/div&gt;
              &lt;div *ngIf="angForm.controls['author'].invalid &amp;&amp; (angForm.controls['author'].dirty || angForm.controls['author'].touched)"
                class="alert alert-danger"&gt;
                &lt;div *ngIf="angForm.controls['author'].errors.required"&gt;
                  Name is required.
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label class="col-md-4"&gt;Description&lt;/label&gt;
                &lt;textarea cols="10" rows="10" type="text" class="form-control" formControlName="description" #description&gt;
                  &lt;/textarea&gt;
              &lt;/div&gt;
              &lt;div *ngIf="angForm.controls['description'].invalid &amp;&amp; (angForm.controls['description'].dirty || angForm.controls['description'].touched)"
                class="alert alert-danger"&gt;
                &lt;div *ngIf="angForm.controls['description'].errors.required"&gt;
                  description is required.
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;button (click)="addReview(author.value, description.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary"&gt;Add&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>Question</em></strong></p>
  
  <p>what is wrog with my code? any help suggestion will be apreciated</p>