Embed widgets in Angular 2 component template

Question

One of my component template need to have a widget from https://www.tradingview.com/widget/ and they provide a script tag that we can embed. But since angular 2 remove script tag from component template, what should be the best to embed these kind of widgets.

Answer 1

I believe you would do something like this and initialize the chart in the ngOnInit() function of the component

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

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

      constructor() { }

      ngOnInit() {

          new TradingView.widget({
              "container_id": "myWidgetContainer",
              "width": 980,
              "height": 610,
              "symbol": "NASDAQ:AAPL",
              "interval": "D",
              "timezone": "Etc/UTC",
              "theme": "White",
              "style": "1",
              "locale": "en",
              "toolbar_bg": "#f1f3f6",
              "enable_publishing": false,
              "allow_symbol_change": true,
              "hideideas": true,
              "show_popup_button": true,
              "popup_width": "1000",
              "popup_height": "650"
          });
      }

    }

my-widget.component.html, put in the containing div

    <div id="myWidgetContainer">
    </div>

Then in your index.html, import the .js filed needed

    <script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>