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>
      </select>
    </div>
    <!--<input class="btn btn-primary" type="submit" value="submit"  aria-pressed="true">-->
    <button type="submit" class="btn btn-primary mb-2">Plot Chart</button>
  </form>
</div>

component.ts:

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';

am4core.useTheme(am4themes_animated);

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

service.ts

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

@Injectable({
  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.symbol("EUR");
        con.exchange("IDEALPRO");
        con.secType("CASH");
        con.currency("USD");

        app.run(con, period, interval, sleepTime);

        JsonArray json = app.getOhlcJson();

        return json;
    }

Comments

Comment posted by Alexander

can you add the the code of the getAllPlot function?

Comment posted by stackoverflow.com/help/how-to-answer

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

By

Leave a Reply

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