Built-in Widgets in Angular 2 Template

Question

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

Answer 1

I believe that you would do something similar and initialize the diagram in the ngOnInit()component function

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 index.html import the required .js

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