title: Angular 7 error of insert and retrieve both are together
body: <p><strong>manage-customers.component.html</strong></p>
  
  <pre><code>&lt;div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"&gt;
    &lt;h1 class="h2"&gt;Manage Customers&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6"&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Customer ID&lt;/label&gt;
        &lt;input type="text" #cID class="form-control" placeholder="Enter Customer ID"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Customer Name&lt;/label&gt;
        &lt;input type="text" #cName class="form-control" placeholder="Enter Customer Name"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Customer Address&lt;/label&gt;
        &lt;input type="text" #cAdd class="form-control" placeholder="Enter Customer Address"&gt;
      &lt;/div&gt;
      &lt;button type="reset" id="save"(click)="saveCustomer(cID.value,cName.value,cAdd.value)"  class="btn btn-primary"&gt;Save Customer&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-6"&gt;
  &lt;table class="table table-bordered table-hover table-dark"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Customer ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Address&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
  &lt;tr *ngFor="let customers of customer"&gt;
    &lt;td&gt;{{customers.id}}&lt;/td&gt;
    &lt;td&gt;{{customers.name}}&lt;/td&gt;
    &lt;td&gt;{{customers.address}}&lt;/td&gt;
    &lt;td&gt;&lt;button (click)="deleteCustomer(customers)" class="btn btn-danger"&gt;Delete&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>manage-customers.component.ts</strong></p>
  
  <pre><code>    saveCustomer(id: string, name: string, address: string) {
          this.http.post('http://localhost:8080/api/v1/customers/', new Customer(id, name, address), {observe: 'response'})
            .subscribe(response =&gt; {
                if (response.status === 201) {
                  alert('Save');
                  this.loadAllCustomers();
                } else {
                  alert('Fail to save the customer');
                }
              }
            );
        }
  
  loadAllCustomers(): void {
      this.http.get&lt;Customer[]&gt;('http://localhost:8080/api/v1/customers').subscribe(customers1 =&gt; {
        this.customer = customers1;
      });
    }
  </code></pre>
  
  <p><strong>Description</strong></p>
  
  <ul>
  <li>When I insert a value in DB also I want to update my web page. But the problem is data is properly entered the DB but not update my page. I can't understand why this?</li>
  </ul>
  
  <p><strong>Error Image</strong>
  I use an angular 7 to build an interface and console error</p>
  
  <p><a href="https://res.cloudinary.com/sewwandi/image/upload/v1561897501/Screenshot_224.png" rel="nofollow noreferrer">Console error</a></p>
  
  <p><strong>Backend Code</strong> </p>
  
  <pre><code>package com.sliit.paf.payment.controller;
  
  import com.sliit.paf.payment.dto.CustomerDTO;
  import com.sliit.paf.payment.service.custom.ManageCustomersService;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.http.HttpHeaders;
  import org.springframework.http.HttpStatus;
  import org.springframework.http.MediaType;
  import org.springframework.http.ResponseEntity;
  import org.springframework.web.bind.annotation.*;
  
  
  import java.util.List;
  
  @CrossOrigin
  @RestController
  @RequestMapping("api/v1/customers")
  public class CustomerController {
  
      @Autowired
      private ManageCustomersService customersService;
  
      @GetMapping
      public ResponseEntity&lt;List&lt;CustomerDTO&gt;&gt; findAllCustomers(){
          List&lt;CustomerDTO&gt; customers = customersService.getCustomers();
          HttpHeaders httpHeaders = new HttpHeaders();
          httpHeaders.add("X-Count",customers.size() + "");
          System.out.println(customers);
          return new ResponseEntity&lt;List&lt;CustomerDTO&gt;&gt;(customers,httpHeaders, HttpStatus.OK);
      }
  
      @GetMapping("/{id:C\\d{3}}")
      public CustomerDTO findCustomer(@PathVariable("id") String cId){
          CustomerDTO customer = customersService.findCustomer(cId);
          return customer;
      }
  
      @DeleteMapping("/{id:C\\d{3}}")
      @ResponseStatus(HttpStatus.OK)
      public void deleteCustomer(@PathVariable("id") String cId){
         customersService.deleteCustomer(cId);
      }
  
      @PostMapping(consumes = MediaType.APPLICATION_JSON_VALUE)
      @ResponseStatus(HttpStatus.CREATED)
      public String saveCustomer(@RequestBody CustomerDTO customerDTO){
          customersService.createCustomer(customerDTO);
          return customerDTO.getId();
      }
  
      @PutMapping(value = "/{id:C\\d{3}}",consumes = MediaType.APPLICATION_JSON_VALUE)
      public ResponseEntity updateCustomer(@PathVariable("id") String cId, @RequestBody CustomerDTO customerDTO){
         if (cId.equals(customerDTO.getId())){
             customersService.updateCustomer(customerDTO);
             return new ResponseEntity(HttpStatus.OK);
         }else {
             return new ResponseEntity(HttpStatus.BAD_REQUEST);
         }
      }
  
  }
  </code></pre>