title: How to refresh an observable on angular 6 after POST
body: <p>I have a table that shows ticket information, and the users may able to add new ticket and send it to the backend. The problem is the table is not updated with the new ticket that the user adds and the other user and the user itself must always refresh the page for it to show </p>
  
  <p>How do I force to update the observable upon insertion of the new ticket?</p>
  
  <p>Here is the code. for the ADD Component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AddService } from '../../services/add.service';
  import { Client, Product, ListTracker } from '../../list';
  
  @Component({
    selector: 'app-add',
    templateUrl: './add.component.html',
    styleUrls: ['./add.component.css']
  })
  export class AddComponent implements OnInit {
    public client_data = [];
    public product_data = [];
    public errorMsg;
    form = {
      title: '',
      client_pk: '',
      product_pk: '',
      severity: '',
      desc: '',
      res: '',
      email: ''
    };
    constructor(private addService: AddService) {
  
    }
  
    ngOnInit() {
      this.getClient();
      this.getProduct();
    }
  
    getClient() {
      this.addService.getClient()
        .subscribe(data =&gt; this.client_data = data,
          error =&gt; this.errorMsg = error);
    }
  
    getProduct() {
      this.addService.getProduct()
        .subscribe(data =&gt; this.product_data = data,
          error =&gt; this.errorMsg = error);
    }
  
    onSubmit() {
      this.addService.addTicket(this.form).subscribe();
    }
  }
  </code></pre>
  
  <p>Here is the ADD Service to Backend</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import { Client, Product,ListTracker } from '../list';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/observable/throw';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AddService {
    constructor(private http: HttpClient) {
  
    }
    getClient(): Observable&lt;Client[]&gt; {
      return this.http.get&lt;Client[]&gt;('http://localhost:3000/api/v1/inuka/getClient')
        .catch(this.errorHandler);
    }
  
    getProduct(): Observable&lt;Product[]&gt; {
      return this.http.get&lt;Product[]&gt;('http://localhost:3000/api/v1/inuka/getProduct')
        .catch(this.errorHandler);
    }
  
    errorHandler(error: HttpErrorResponse) {
      return Observable.throw(error.message || "Server Error");
    }
  
    addTicket(form):Observable&lt;ListTracker[]&gt; {
      return this.http.post&lt;ListTracker[]&gt;('http://localhost:3000/api/v1/inuka/addTicket', form)
        .catch(this.errorHandler);
  
    }
  }
  </code></pre>
  
  <p>Here is the List Component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ListService } from '../../services/list.service';
  
  @Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css']
  })
  
  export class ListComponent implements OnInit {
    public list_data = [];
    public errorMsg;
  
    constructor(private listService:ListService) { 
  
    }
  
    ngOnInit() {
      this.listService.getAllTrackerData()
      .subscribe(data =&gt; this.list_data = data,
                  error =&gt; this.errorMsg = error);
    }
  }
  </code></pre>
  
  <p>Here is the List Service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import { ListTracker } from '../list';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/observable/throw';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ListService {
    constructor(private http: HttpClient) {
  
    }
  
    getAllTrackerData(): Observable&lt;ListTracker[]&gt; {
      return this.http.get&lt;ListTracker[]&gt;('http://localhost:3000/api/v1/inuka/getAllTrackerData')
        .catch(this.errorHandler);
    }
    errorHandler(error: HttpErrorResponse) {
      return Observable.throw(error.message || "Server Error");
    }
  }
  </code></pre>