Small task to solve an angular problem

Closed Posted 5 years ago Paid on delivery
Closed Paid on delivery

I need to embed an external javascript widget inside an angular 2/4/5 component and make it work. Its a small task. Just need someone to solve this problem for me. The code of the widget is below. If you put this code in plain html file, it will work. I need this to loaded dynamically from typescript to html.

You can see this widget working here [login to view URL]

Widget code below

<div class="tradingview-widget-container">

<div class="tradingview-widget-container__widget12"></div>

<div class="tradingview-widget-copyright"><a href="[login to view URL]" rel="noopener" target="_blank"><span class="blue-text"></span></a> by TradingView</div>

<script type="text/javascript" src="[login to view URL]" >

{

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

},

{

"title": "tes",

"symbols": []

}

]

}

</script>

</div>

Provide working angular 5 project. Do not use iframes

CSS HTML5 JavaScript

Project ID: #17060340

About the project

2 proposals Remote project Active 5 years ago

2 freelancers are bidding on average ₹1775 for this job

HiLifeInfotech

Hi, Please contact us for further discussion. We have done this kind of task earlier. We have experience on angular 2/4/5/6.

₹2250 INR in 2 days
(2 Reviews)
2.9