Embed TradingView widgets into angular components

Question

I was trying to make an angular project where I am using trading view widgets. The problem is that the widgets work fine when I use them in index.html, but I want to use them as components for the website. I try to include the widget in app.component.html but the widget code doesn't work there. I'm new to angular and don't know what changes I am supposed to make in app.component.ts. Could someone help me out here? This is the code for index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>News</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
  <div class="container">
    <h1>Forex Rates</h1>
    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
      <div class="tradingview-widget-container__widget"></div>
      <!-- <div class="tradingview-widget-copyright"><a href="https://in.tradingview.com/markets/currencies/forex-cross-rates/" rel="noopener" target="_blank"><span class="blue-text">Forex Rates</span></a> by TradingView</div> -->
      <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-forex-cross-rates.js" async>
      {
      "width": 840,
      "height": 400,
      "currencies": [
        "EUR",
        "USD",
        "JPY",
        "GBP",
        "CHF",
        "AUD",
        "CAD",
        "NZD",
        "CNY",
        "INR"
      ],
      "isTransparent": true,
      "colorTheme": "light",
      "locale": "in"
    }
      </script>
    </div>
    <!-- TradingView Widget END -->
  </div>
</body>
</html>

And here is the app.component.ts:

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'news';
}

I tried the methods given by people Embed Tradingview into Angular 5

I can't seem to understand the implementation. Again, I'm very new to angular and infact html and css too. Could someone help me out?

Edit: This is the component.ts that I tried to inregrate for (Advanced Real Time chart)[https://in.tradingview.com/widget/advanced-chart/]

import { Component, OnInit, AfterViewInit } from '@angular/core';

declare const TradingView: any;

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

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"
    }
      );
  }

}

And here is the html file for the same:

<!-- 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 -->

The given code gives a console error: ReferenceError: TradingView is not defined

Does this answer your question? [Embed Tradingview into Angular 5](https://stackoverflow.com/questions/48296351/embed-tradingview-into-angular-5) — Jeremy Thille, Jun 02 '20 at 08:57
Unfortunately, no. That's the link I have already tried. I'm new to angular, I can't seem to wrap my mind around those answers :( — Madara, Jun 02 '20 at 09:22
And Angular is far from the beginner's stuff... jQuery is a cute little toolbox, but Angular is in a different league entirely — Jeremy Thille, Jun 02 '20 at 10:03
But I need to know how to do it. I'm working on a project :0 — Madara, Jun 03 '20 at 09:28
You said you tried to include the code in `app.component.html`? Can you show this attempt in your question? — Jeremy Thille, Jun 03 '20 at 12:27
I have uploaded my component file and the html linked with it — Madara, Jun 03 '20 at 13:35
Put this line `` not in your component, but in `index.html` in the `` tag. It will define `window.TradingView` before your Angular app starts up — Jeremy Thille, Jun 03 '20 at 13:47
It worked!!!! You're a life saver! Can't thank you enough! :) Could you tell me what that js is for? — Madara, Jun 03 '20 at 14:51
Simple, it is the script that defines the `TradingView` object. So, it has to be placed before everything else, then you can use `TradingView` :) I wrote my comment as an answer, could you please mark it as accepted? — Jeremy Thille, Jun 03 '20 at 16:53

score 4 · Accepted Answer · answered Jun 03 '20 at 16:52

4

Put this line <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> not in your component, but in index.html in the <head> tag. It will define window.TradingView before your Angular app starts up.

answered Jun 03 '20 at 16:52

Jeremy Thille

26,047
12
43
63

Embed TradingView widgets into angular components

1 Answers1