title: Angular - Update data automatically without Refresh the Page
body: <p>In my application there is a table that get rows from database.</p>
  
  <p>This is the AJAX CALL <strong>(SERVICE)</strong></p>
  
  <pre><code>getPosts(): Observable&lt;Posts[]&gt; {
      return this.http.post&lt;Posts[]&gt;(this.myAppUrl + this.myApiPostsUrl, this.authService.getLoggedUserFromSessionStorage())
        .pipe(
          retry(1),
          catchError(this.errorHandler)
        );
    }
  </code></pre>
  
  <p>All work perfectly, but my datas dont update automatically, and the user need to refresh the page to see the new rows, how can i do this?
  I would like do that the new rows are added in the table dynamically ... without update the page.
  This is the table </p>
  
  <p><strong>COMPONENT HTML</strong></p>
  
  <pre><code>    &lt;table *ngIf="(posts$ | async)?.length&gt;0" class="table align-items-center table-flush"&gt;
      .....
   &lt;tr *ngFor="let post of (posts$ | async) | filter:authService.filter | paginate: config | orderBy: key : reverse"&gt;
                &lt;!--              &lt;td&gt;{{posts.id}}&lt;/td&gt;--&gt;
                &lt;td&gt;{{post.title}}&lt;/td&gt;
                &lt;td&gt;{{post.body}}&lt;/td&gt;
  .....
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>COMPONENT TS</strong></p>
  
  <pre><code>ngOnInit() {
      this.loadPosts();
    }
  
    loadPosts() {
      this.message = 'Loading....';
      this.posts$ = this.postService.getPosts();
      if (this.posts$ == null) {
        this.message = 'No Posts found';
      }
    }
  </code></pre>
  
  <p>Thanks so much.</p>