candlestick.component.html

<div id='abc'>
<!-- <select (change)="selectChangeHandler
($event)">
  <option selected="selected" value="IBM">IBM</option>
  <option value="WMT">Walmart</option>
  <option value="BABA">Alibaba</option>
  <option value="SNAP">Snap Inc</option>
  <option value="AAPL">Apple</option>
  <option value="NFLX">Netflix</option>
  <option value="TWTR">Twitter</option>
  <option value="AMZN">Amazon</option>
  <option value="SPOT">Spotify</option>
  <option value="FB">Facebook</option>
  <option value="TSLA">Tesla Inc</option>
  <option value="DAL">Delta Airlines</option>
  <option value="MSFT">Microsoft</option>
  <option value="MA">Mastercard</option>
  <option value="GOOGL">Alphabet(Google)</option>
  <p></p>

</select> -->

<select [(ngModel)] = "defaultStock" (ngModelChange) = 'temp($event)'>
    <option *ngFor="let s of stocks" [value]="s.symbol">
      {{s.name}}
    </option>
  </select>
  <p>Displaying stock performance of: {{defaultStock}}</p>
  <br>
  <button (click)='checkAnother()'>Check Another</button>
<google-chart #chart
   [title]="title"
   [type]="type"
   [data]= "data"
   [columns] = "columns"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>
</div>

candlestick.component.ts

import { Component, OnInit } from '@angular/core';
import { LiveMarketDataService } from '../../services/live-market-data.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-candlestick',
  templateUrl: './candlestick.component.html',
  styleUrls: ['./candlestick.component.css']
})
export class CandlestickComponent implements OnInit {
  selectedStock: string = '';

  selectChangeHandler(event: any) {
    this.selectedStock = event.target.value;

  }
  stocks = [];
  mySubscription: any;
  defaultStock: string;
  stockDetails = [];
  title = this.selectedStock;
  type = 'CandlestickChart';
  data = [];
  columns = ['Timestamp', 'Open', 'High', 'Low', 'Close'];
  options = { };
  width = 1000;
  height = 800;
  count = 0;

  constructor(private livemarketdataservice: LiveMarketDataService, private router: Router) {
 }

  ngOnInit(): any
{   this.stocks = [
      {symbol: "IBM", name: "IBM"},
      {symbol: "FB", name: "Facebook"},
      {symbol: "WMT", name: "Walmart"},
      {symbol: "SNAP", name: "Snap Inc"},
      {symbol: "AAPL", name: "Apple"},
      {symbol: "NFLX", name: "Netflix"},
      {symbol: "TWTR", name: "Twitter"},
      {symbol: "AMZN", name: "Amazon"},
      {symbol: "SPOT", name: "Spotify"},
      {symbol: "TSLA", name: "Tesla Inc"},
      {symbol: "DAL", name: "Delta Airlines"},
      {symbol: "MSFT", name: "Microsoft"},
      {symbol: "MA", name: "Mastercard"},
];
    this.defaultStock = 'IBM';
    //this.myMethod();

}

temp(val: any){
  this.myMethod(val);
}
myMethod(val) {
  //setTimeout(() => {


  this.selectedStock = 'IBM';
    //this.selectChangeHandler(event);
    let all_times = [];
    console.log("Val: " + val);
    this.livemarketdataservice.stockLiveData(val).subscribe(res => {
      this.count += 1;
    let timeStamp = res["Time Series (1min)"];
    all_times.push(timeStamp);


    let element: any;

    for(element in timeStamp){
      this.stockDetails.push([
      element,
      parseFloat(res["Time Series (1min)"][element]["1. open"]),
      parseFloat(res["Time Series (1min)"][element]["2. high"]),
      parseFloat(res["Time Series (1min)"][element]["3. low"]),
      parseFloat(res["Time Series (1min)"][element]["4. close"])
    ])
    }
    this.data = this.stockDetails;


  });


//}, 12000);

}
checkAnother() {
    window.location.reload();
}
}

live-market-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { CandlestickComponent } from '../components/candlestick/candlestick.component';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
// @Inject({
//   sym: "IBM"
// })
export class LiveMarketDataService {
  constructor(private httpclient: HttpClient) {}
    stockLiveData(symbol) {
        const params = new HttpParams({
        fromObject: {
          'function': 'TIME_SERIES_INTRADAY',
          "symbol": symbol,
          'interval': '1min',
          "apikey": '421KN1U6YLBFSGR4',
        }
      });
        return this.httpclient.get('https://www.alphavantage.co/query', {params}).pipe(map(result => result));

  }
}