I need to load some html and javascript dynamically in an angular 4/5 component and make it run. Below is a widget code provided by third party that creates a stock chart. It works fine in a basic html page. How do I load this dynamically in angular. Eventually this content would come from database.
Example 1
<div class="tradingview-widget-container">
<div id="tradingview_f4496"></div>
<div class="tradingview-widget-copyright"><a `href="https://in.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",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "in",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_f4496"
}
);
</script>
</div>
Example 2
<!-- 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" rel="noopener" target="_blank"><span class="blue-text">Market Data</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
{
"showChart": true,
"locale": "in",
"largeChartUrl": "",
"width": "400",
"height": "660",
"plotLineColorGrowing": "rgba(60, 188, 152, 1)",
"plotLineColorFalling": "rgba(255, 74, 104, 1)",
"gridLineColor": "rgba(233, 233, 234, 1)",
"scaleFontColor": "rgba(233, 233, 234, 1)",
"belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
"belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
"symbolActiveColor": "rgba(242, 250, 254, 1)",
"tabs": [
{
"title": "Indices",
"symbols": [
{
"s": "INDEX:SPX",
"d": "S&P 500"
},
{
"s": "INDEX:IUXX",
"d": "Nasdaq 100"
},
{
"s": "INDEX:DOWI",
"d": "Dow 30"
},
{
"s": "INDEX:NKY",
"d": "Nikkei 225"
},
{
"s": "NASDAQ:AAPL",
"d": "Apple"
},
{
"s": "NASDAQ:GOOG",
"d": "Google"
}
],
"originalTitle": "Indices"
},
{
"title": "Commodities",
"symbols": [
{
"s": "CME_MINI:ES1!",
"d": "E-Mini S&P"
},
{
"s": "CME:E61!",
"d": "Euro"
},
{
"s": "COMEX:GC1!",
"d": "Gold"
},
{
"s": "NYMEX:CL1!",
"d": "Crude Oil"
},
{
"s": "NYMEX:NG1!",
"d": "Natural Gas"
},
{
"s": "CBOT:ZC1!",
"d": "Corn"
}
],
"originalTitle": "Commodities"
},
{
"title": "Bonds",
"symbols": [
{
"s": "CME:GE1!",
"d": "Eurodollar"
},
{
"s": "CBOT:ZB1!",
"d": "T-Bond"
},
{
"s": "CBOT:UD1!",
"d": "Ultra T-Bond"
},
{
"s": "EUREX:GG1!",
"d": "Euro Bund"
},
{
"s": "EUREX:II1!",
"d": "Euro BTP"
},
{
"s": "EUREX:HR1!",
"d": "Euro BOBL"
}
],
"originalTitle": "Bonds"
},
{
"title": "Forex",
"symbols": [
{
"s": "FX:EURUSD"
},
{
"s": "FX:GBPUSD"
},
{
"s": "FX:USDJPY"
},
{
"s": "FX:USDCHF"
},
{
"s": "FX:AUDUSD"
},
{
"s": "FX:USDCAD"
}
],
"originalTitle": "Forex"
}
]
}
</script>
</div>
<!-- TradingView Widget END -->
