How can I add new product using angular and springboot?

Question

I need to add a new product to my table. This is working http://localhost:8080/product/create/ on Postman. When I post and add a new product it returns the id and automatically adds it to my table. My problem is how can I achieve it on angular CLI. I don't how will I do it. Can somebody help me? Here's my code:

ProductsController.java

@PostMapping("/product/create/")
private int saveProduct(@RequestBody Products products)
{
   productsService.save(products);
   return products.getId();
}

app.component.ts

ngOnInit() {
    this.getProduct();
  }
  public getProduct(): void {
    this.productServive.getProduct().subscribe(
      (response: Product[]) => {
        this.products = response;
      },
      (error: HttpErrorResponse)=> {
        alert(error.message);
      }
    )
  }

  public onAddProduct(addForm: NgForm): void {
    this.productServive.addProduct(addForm.value).subscribe(
      (response: Product) => {
        console.log(response);
        this.getProduct();
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }

product.service.ts

private apiServerUrl = environment.apiBaseUrl;

  constructor(private http: HttpClient) { }

  public getProduct() : Observable<Product[]> {
    return this.http.get<Product[]>(`${this.apiServerUrl}/products/hasstocks`);
  }

  public addProduct(product: Product) : Observable<Product> {
    return this.http.post<Product>(`${this.apiServerUrl}/product/create/`, product);
  }

app.component.html

  <form #addForm="ngForm" (ngSubmit)="onAddProduct(addForm)">
    <div class="mb-3">
      <label for="name" class="col-form-label">Name:</label>
      <input type="text" class="form-control" id="name" ngForm name="name">
    </div>
    <div class="mb-3">
      <label for="description" class="col-form-label">Description:</label>
      <input type="text" class="form-control" id="description" ngModel name="description">
    </div>
    <div class="mb-3">
      <label for="sku" class="col-form-label">SKU:</label>
      <input type="text" class="form-control" id="sku" ngModel name="sku">
    </div>
    <div class="mb-3">
      <label for="price" class="col-form-label">Price:</label>
      <input type="text" class="form-control" id="price" ngModel name="price">
    </div>
    <div class="mb-3">
      <label for="quantity" class="col-form-label">Quantity:</label>
      <input type="text" class="form-control" id="quantity" ngModel name="quantity">
    </div>
    <div class="float-end">
      <button [disabled]="addForm.invalid" type="button" class="btn btn-primary">Add Product</button>
    </div>
  </form>

Answer 1

It can not be together, you must separete 2 methods as save and getProduct but you can attach getProduct methods and page and when you save products and refresh the page it will seems automatically adds it to your table