Solution 1 :

reqParams URL is like http://localhost:8080/employees?id=?. So I think you must change in service.ts like

getEmployee(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/employees?id=${id}`);

Problem :

I am new to Angular 9 and wonder how can I collect the parameters from a HTML form to SpringBoot controller. I need to pass 3 variables, namely fromDate, toDate and interval.

HTML form sample:

<div class="container">
  <h1>Chart input</h1>
  <form class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
      <label for="fromDate" class="sr-only">From Date</label>
      <input type="fromDate" class="form-control" id="fromDate" placeholder="From Date">
      <label for="toDate" class="sr-only">To Date</label>
      <input type="toDate" class="form-control" id="toDate" placeholder="To Date">
      <label for="intervalSelected">Interval Selected</label>
      <select class="form-control" id="intervalSelected" name="interval">
        <option value="1 min">1 min</option>
        <option value="5 mins">5 mins</option>
        <option value="15 mins">15 mins</option>
        <option value="30 mins">30 mins</option>
        <option value="1 day">1 day</option>
    <!--<input class="btn btn-primary" type="submit" value="submit"  aria-pressed="true">-->
    <button type="submit" class="btn btn-primary mb-2">Plot Chart</button>


import { Component, NgZone, OnInit } from "@angular/core";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { Router, ActivatedRoute } from '@angular/router';
import * as $ from 'jquery';
import 'jqueryui';


  selector: 'app-plot-chart',
  templateUrl: './plot-chart.component.html',
  styleUrls: ['./plot-chart.component.css']
export class PlotChartComponent implements OnInit{


import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
import { Observable } from 'rxjs';

  providedIn: 'root'
export class EmployeeService {

  private baseUrl = 'http://localhost:8080/api/';

  constructor(private http: HttpClient) { }

  getEmployee(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/employees/${id}`);

Spring controller: (Content not too relevant except taking in 3 request parameters)

    @RequestMapping(value = "candlestick", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
    public @ResponseBody JsonArray getAllPlot(@RequestParam("fromDate") String fromDate, 
                                              @RequestParam("toDate") String toDate, 
                                              @RequestParam("interval") Integer interval) {
        Test app = new Test();

        Contract con = new Contract();
        con.currency("USD");, period, interval, sleepTime);

        JsonArray json = app.getOhlcJson();

        return json;


Comment posted by Alexander

can you add the the code of the getAllPlot function?

Comment posted by

Check this link to see how to write a good answer…


Leave a Reply

Your email address will not be published. Required fields are marked *