1

I am interested to know how can I embed the following TradingView's code to my Angular 8 project?

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_bac65"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": 980,
  "height": 610,
  "symbol": "NASDAQ:AAPL",
  "timezone": "Etc/UTC",
  "theme": "Light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "withdateranges": true,
  "range": "ytd",
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "show_popup_button": true,
  "popup_width": "1000",
  "popup_height": "650",
  "no_referral_id": true,
  "container_id": "tradingview_bac65"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

I also like to know how can I feed my data from a .csv file or from a URL address(like BTC online price).

Hasani
  • 3,543
  • 14
  • 65
  • 125
  • This one worked for me: https://stackoverflow.com/questions/48296351/embed-tradingview-into-angular-5 – WtFudgE Nov 19 '21 at 09:34

1 Answers1

2

I could solve my problem like this:

  1. I created a new component in my project and named it tradingview. Then I added the following code into the tradingview.component.ts file:
import { Component, OnInit, AfterViewInit } from '@angular/core';


declare const TradingView: any;

@Component({
  selector: 'app-tradingview',
  templateUrl: './tradingview.component.html',
  styleUrls: ['./tradingview.component.scss']
})



export class TradingviewComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit(){
    new TradingView.widget(
      {
      "width": 980,
      "height": 610,
      "symbol": "NASDAQ:AAPL",
      "timezone": "Etc/UTC",
      "theme": "Light",
      "style": "1",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "withdateranges": true,
      "range": "ytd",
      "hide_side_toolbar": false,
      "allow_symbol_change": true,
      "show_popup_button": true,
      "popup_width": "1000",
      "popup_height": "650",
      "no_referral_id": true,
      "container_id": "tradingview_bac65"
    }
      );
  }

}

Then I added following code into the tradingview.component.html file:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div id="tradingview_bac65"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">

    </script>
  </div>
  <!-- TradingView Widget END -->

And seems it works fine!

Hasani
  • 3,543
  • 14
  • 65
  • 125
  • There's an error in the console saying `ReferenceError: TradingView is not defined`. Could you please help out with this? – Madara Jun 03 '20 at 10:36
  • 1
    @Madara: Did you add `import { TradingviewComponent } from './tradingview/tradingview.component'; ` line into the `app.module.ts` file of your project? – Hasani Jun 08 '20 at 10:23
  • Have a look at https://stackoverflow.com/a/67231441/790635 to dynamically inject it instead – emp Apr 23 '21 at 14:13
  • How is the code going to know what new TradingView.widget is? importing your TradingViewComponent is not the same thing, this widget is external, needs some other import – WtFudgE Nov 19 '21 at 09:32