[ANSWERED] css – How to bind html in Angular 8

Question 1

In Angular, you can use innerHTML in your template, like this:

<div [innerHTML]="theHtmlString"></div>

Somewhere in your Typescript component, you can assign the HTML value to theHtmlString:

@Component({
...
})
export class MyComponent {
  theHtmlString: string;

  constructor() {}

  async ngOnInit() {
    this.theHtmlString = await getHtmlPlotFromAPI();
  }  
}

Note that it is typically better practice to return raw JSON data from your backend and bind it to your Angular template on the client side.

Question 2

I am struggling to display html in Angular 8. I am developing an app in angular 8 and my back-end code is in Flask. My front-end is receiving a JSON data which is a html template. Now I need to display that template in Angular.

The JSON data I am receiving is given below:

`

<html>
 <head>
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
   <style>body{ margin:0 100; background:whitesmoke; }</style>
 </head>
 <body>
   <h1></h1>
<div>
<div id="bff3697b-6ab4-4b03-9932-87484de30381" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">

     window.PLOTLYENV=window.PLOTLYENV || {};

 if (document.getElementById("bff3697b-6ab4-4b03-9932-87484de30381")) {
     Plotly.newPlot(
         'bff3697b-6ab4-4b03-9932-87484de30381',
         [{"histnorm": "probability", "opacity": 0.8, "type": "histogram", "x": [7665.7, 16227.56, 5445.08, 4294.01, 3047.38, 5792.88, 7783.29, 10969.92, 3976.19, 13985.95, 6483.98, 5076.62, 3846.69, 7423.5, 6705.06, 4447.09, 5558.81, 5744.26, 5157.67, 5464.3, 4803.11, 6736.29, 4400.25, 4484.76, 5003.46, 6313.67, 4096.05, 7641.69, 7888.45, 13288.3, 16026.95, 5317.73, 6627.48, 10342.09, 9298.19, 5579.38, 5891.89, 5705.15, 5392.63, 5067.95, 5657.95, 5476.77, 3743.82, 7279.83, 3888.18, 4015.99, 5205.88, 6687.31, 5946.34, 3610.91, 3973.64, 3195.0, 11049.83, 5227.45, 6193.73, 6591.53, 7057.34, 5737.5, 5258.5, 5069.92, 7953.26, 9283.54, 20324.1, 6967.87, 7435.68, 8926.81, 15106.95, 9990.29, 8352.12, 9858.95, 12826.69, 10861.36, 11405.47, 8848.72, 6619.18, 12410.85, 16577.89, 16159.03, 5420.87, 24308.08, 16805.05, 11619.75, 14463.16, 9663.49, 13049.21, 12432.9, 18482.13, 19264.55, 8231.32, 7914.63, 5614.09, 7130.98, 17311.07, 17664.37, 16790.96, 7568.41, 13016.7, 13253.78, 11118.24, 9756.02, 7754.46, 16462.75, 9420.9, 5456.42, 5342.85, 13557.58, 6291.29, 7484.99, 7330.86, 16943.34, 23108.17, 11866.71, 24322.77, 17990.83, 10609.29, 11754.42, 16209.23, 20445.39, 16411.1, 13269.05, 15041.91, 9685.15, 32292.39, 11588.38, 15466.97, 21857.76, 19501.92, 13998.62, 23485.92, 30581.47, 18229.58, 14396.43, 17588.07, 15501.08, 8244.17, 12275.61, 14533.65, 17338.42, 13910.32, 24438.67, 22122.61, 17292.22, 18912.3, 13955.66, 13300.51, 11405.18, 14351.98, 15731.26, 33969.35, 10393.69, 11834.89, 11072.75, 18563.32, 12115.78, 11548.46, 15311.1, 17217.91, 16151.7, 18554.97, 14446.26, 11165.57, 15348.44, 19014.68, 18717.08, 11900.41, 17082.0, 15714.11, 14843.93, 23042.99]}, {"line": {"color": "black"}, "opacity": 0.8, "type": "scatter", "x": [3047.38, 3359.7231313131315, 3672.066262626263, 3984.409393939394, 4296.752525252525, 4609.095656565656, 4921.4387878787875, 5233.781919191919, 5546.12505050505, 5858.468181818182, 6170.811313131313, 6483.154444444444, 6795.497575757576, 7107.840707070707, 7420.183838383838, 7732.526969696969, 8044.8701010101, 8357.213232323233, 8669.556363636362, 8981.899494949495, 9294.242626262625, 9606.585757575756, 9918.928888888888, 10231.27202020202, 10543.61515151515, 10855.958282828282, 11168.301414141413, 11480.644545454543, 11792.987676767676, 12105.330808080806, 12417.673939393939, 12730.017070707068, 13042.360202020202, 13354.703333333331, 13667.046464646464, 13979.389595959594, 14291.732727272727, 14604.075858585857, 14916.41898989899, 15228.76212121212, 15541.105252525253, 15853.448383838382, 16165.791515151512, 16478.134646464645, 16790.477777777774, 17102.820909090908, 17415.164040404037, 17727.50717171717, 18039.8503030303, 18352.193434343433, 18664.536565656563, 18976.879696969696, 19289.222828282826, 19601.56595959596, 19913.90909090909, 20226.25222222222, 20538.59535353535, 20850.938484848484, 21163.281616161614, 21475.624747474747, 21787.967878787877, 22100.31101010101, 22412.65414141414, 22724.997272727273, 23037.340404040402, 23349.68353535353, 23662.026666666665, 23974.369797979794, 24286.712929292928, 24599.056060606057, 24911.39919191919, 25223.74232323232, 25536.085454545453, 25848.428585858583, 26160.771717171716, 26473.114848484845, 26785.45797979798, 27097.80111111111, 27410.14424242424, 27722.48737373737, 28034.830505050504, 28347.173636363634, 28659.516767676763, 28971.859898989896, 29284.203030303026, 29596.54616161616, 29908.88929292929, 30221.232424242422, 30533.57555555555, 30845.918686868685, 31158.261818181814, 31470.604949494948, 31782.948080808077, 32095.29121212121, 32407.63434343434, 32719.977474747473, 33032.3206060606, 33344.66373737373, 33657.00686868686, 33969.35], "y": [0.249283457622531, 0.2674333873470217, 0.2861467938154564, 0.3053607661797153, 0.3250039824583579, 0.34499692347945327, 0.3652522125488463, 0.3856750833735535, 0.40616397648807745, 0.42661126200403043, 0.44690408398108245, 0.46692531915597935, 0.4865546402264487, 0.5056696714311, 0.5241472218586721, 0.5418645798229751, 0.5587008498135356, 0.5745383120314507, 0.5892637833938382, 0.6027699581788769, 0.6149567062172908, 0.6257323067348848, 0.6350145966220898, 0.6427320130458113, 0.6488245119089158, 0.6532443456739198, 0.6559566864585457, 0.6569400830298694, 0.6561867433094863, 0.6537026371855928, 0.6495074177344868, 0.6436341623055888, 0.636128938241205, 0.6270502012064288, 0.6164680371206057, 0.6044632614398879, 0.5911263919781937, 0.5765565135180727, 0.5608600541108191, 0.5441494941655111, 0.5265420301605734, 0.5081582150726898, 0.489120597412479, 0.4695523801024612, 0.4495761193595623, 0.42931248229090196, 0.4088790801254196, 0.388389391939393, 0.36795179145053275, 0.3476686870155601, 0.32763578243376934, 0.30794146359709057, 0.288666313496316, 0.26988275565011915, 0.2516548237196403, 0.23403805295152275, 0.21707948719385872, 0.20081779358192822, 0.18528347561510858, 0.17049917425564357, 0.15648004587882092, 0.14323420538945944, 0.1307632225814578, 0.1190626598392077, 0.10812263954041262, 0.09792842999345658, 0.08846103939997974, 0.07969780814361545, 0.07161299063678907, 0.06417831897683102, 0.057363541738973275, 0.05113693233729595, 0.04546576248778323, 0.040316737385615496, 0.035656390240083526, 0.031451434776970426, 0.027669075205349968, 0.024277273942556778, 0.021244978090104335, 0.01854230625037641, 0.01614069776781578, 0.014013026870604623, 0.01213368448330337, 0.010478630683371588, 0.009025420892231873, 0.007753208933006081, 0.006642730061455654, 0.0056762669936145475, 0.004837601822833305, 0.004111956549991866, 0.0034859247526226496, 0.0029473967001460246, 0.002485479991154406, 0.0020904175516451773, 0.0017535045963510698, 0.0014670059239780112, 0.0012240746954412796, 0.001018673635405657, 0.0008454994040622246, 0.0006999107098184589]}],
         {"showlegend": false, "template": {"data": {"scatter": [{"type": "scatter"}]}}, "title": {"text": "Total Volume: Histogram and Normalized-Density"}},
         {"responsive": true}
     )
 };

</script>
</div>
 </body>
</html>

`
The issue I am facing is that I am unable to display the plot which is in above html template in Angular. The same template if I save it in a file with .html extension and then try to open that file in browser the get to see the plot in browser but same html template do not bind in angular 8, or rather not displaying it.

My app.component.html:

<div [innerHtml] = "someData"></div>

My app.component.ts:

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

@Component({
  selector: 'app-data-decomposition',
  templateUrl: './data-decomposition.component.html',
  styleUrls: ['./data-decomposition.component.css']

})
export class DataDecompositionComponent implements OnInit {
 someData = `<html>
 <head>
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
   <style>body{ margin:0 100; background:whitesmoke; }</style>
 </head>
 <body>
   <h1></h1>
   <div>


<div id="bff3697b-6ab4-4b03-9932-87484de30381" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">

     window.PLOTLYENV=window.PLOTLYENV || {};

 if (document.getElementById("bff3697b-6ab4-4b03-9932-87484de30381")) {
     Plotly.newPlot(
         'bff3697b-6ab4-4b03-9932-87484de30381',
         [{"histnorm": "probability", "opacity": 0.8, "type": "histogram", "x": [7665.7, 16227.56, 5445.08, 4294.01, 3047.38, 5792.88, 7783.29, 10969.92, 3976.19, 13985.95, 6483.98, 5076.62, 3846.69, 7423.5, 6705.06, 4447.09, 5558.81, 5744.26, 5157.67, 5464.3, 4803.11, 6736.29, 4400.25, 4484.76, 5003.46, 6313.67, 4096.05, 7641.69, 7888.45, 13288.3, 16026.95, 5317.73, 6627.48, 10342.09, 9298.19, 5579.38, 5891.89, 5705.15, 5392.63, 5067.95, 5657.95, 5476.77, 3743.82, 7279.83, 3888.18, 4015.99, 5205.88, 6687.31, 5946.34, 3610.91, 3973.64, 3195.0, 11049.83, 5227.45, 6193.73, 6591.53, 7057.34, 5737.5, 5258.5, 5069.92, 7953.26, 9283.54, 20324.1, 6967.87, 7435.68, 8926.81, 15106.95, 9990.29, 8352.12, 9858.95, 12826.69, 10861.36, 11405.47, 8848.72, 6619.18, 12410.85, 16577.89, 16159.03, 5420.87, 24308.08, 16805.05, 11619.75, 14463.16, 9663.49, 13049.21, 12432.9, 18482.13, 19264.55, 8231.32, 7914.63, 5614.09, 7130.98, 17311.07, 17664.37, 16790.96, 7568.41, 13016.7, 13253.78, 11118.24, 9756.02, 7754.46, 16462.75, 9420.9, 5456.42, 5342.85, 13557.58, 6291.29, 7484.99, 7330.86, 16943.34, 23108.17, 11866.71, 24322.77, 17990.83, 10609.29, 11754.42, 16209.23, 20445.39, 16411.1, 13269.05, 15041.91, 9685.15, 32292.39, 11588.38, 15466.97, 21857.76, 19501.92, 13998.62, 23485.92, 30581.47, 18229.58, 14396.43, 17588.07, 15501.08, 8244.17, 12275.61, 14533.65, 17338.42, 13910.32, 24438.67, 22122.61, 17292.22, 18912.3, 13955.66, 13300.51, 11405.18, 14351.98, 15731.26, 33969.35, 10393.69, 11834.89, 11072.75, 18563.32, 12115.78, 11548.46, 15311.1, 17217.91, 16151.7, 18554.97, 14446.26, 11165.57, 15348.44, 19014.68, 18717.08, 11900.41, 17082.0, 15714.11, 14843.93, 23042.99]}, {"line": {"color": "black"}, "opacity": 0.8, "type": "scatter", "x": [3047.38, 3359.7231313131315, 3672.066262626263, 3984.409393939394, 4296.752525252525, 4609.095656565656, 4921.4387878787875, 5233.781919191919, 5546.12505050505, 5858.468181818182, 6170.811313131313, 6483.154444444444, 6795.497575757576, 7107.840707070707, 7420.183838383838, 7732.526969696969, 8044.8701010101, 8357.213232323233, 8669.556363636362, 8981.899494949495, 9294.242626262625, 9606.585757575756, 9918.928888888888, 10231.27202020202, 10543.61515151515, 10855.958282828282, 11168.301414141413, 11480.644545454543, 11792.987676767676, 12105.330808080806, 12417.673939393939, 12730.017070707068, 13042.360202020202, 13354.703333333331, 13667.046464646464, 13979.389595959594, 14291.732727272727, 14604.075858585857, 14916.41898989899, 15228.76212121212, 15541.105252525253, 15853.448383838382, 16165.791515151512, 16478.134646464645, 16790.477777777774, 17102.820909090908, 17415.164040404037, 17727.50717171717, 18039.8503030303, 18352.193434343433, 18664.536565656563, 18976.879696969696, 19289.222828282826, 19601.56595959596, 19913.90909090909, 20226.25222222222, 20538.59535353535, 20850.938484848484, 21163.281616161614, 21475.624747474747, 21787.967878787877, 22100.31101010101, 22412.65414141414, 22724.997272727273, 23037.340404040402, 23349.68353535353, 23662.026666666665, 23974.369797979794, 24286.712929292928, 24599.056060606057, 24911.39919191919, 25223.74232323232, 25536.085454545453, 25848.428585858583, 26160.771717171716, 26473.114848484845, 26785.45797979798, 27097.80111111111, 27410.14424242424, 27722.48737373737, 28034.830505050504, 28347.173636363634, 28659.516767676763, 28971.859898989896, 29284.203030303026, 29596.54616161616, 29908.88929292929, 30221.232424242422, 30533.57555555555, 30845.918686868685, 31158.261818181814, 31470.604949494948, 31782.948080808077, 32095.29121212121, 32407.63434343434, 32719.977474747473, 33032.3206060606, 33344.66373737373, 33657.00686868686, 33969.35], "y": [0.249283457622531, 0.2674333873470217, 0.2861467938154564, 0.3053607661797153, 0.3250039824583579, 0.34499692347945327, 0.3652522125488463, 0.3856750833735535, 0.40616397648807745, 0.42661126200403043, 0.44690408398108245, 0.46692531915597935, 0.4865546402264487, 0.5056696714311, 0.5241472218586721, 0.5418645798229751, 0.5587008498135356, 0.5745383120314507, 0.5892637833938382, 0.6027699581788769, 0.6149567062172908, 0.6257323067348848, 0.6350145966220898, 0.6427320130458113, 0.6488245119089158, 0.6532443456739198, 0.6559566864585457, 0.6569400830298694, 0.6561867433094863, 0.6537026371855928, 0.6495074177344868, 0.6436341623055888, 0.636128938241205, 0.6270502012064288, 0.6164680371206057, 0.6044632614398879, 0.5911263919781937, 0.5765565135180727, 0.5608600541108191, 0.5441494941655111, 0.5265420301605734, 0.5081582150726898, 0.489120597412479, 0.4695523801024612, 0.4495761193595623, 0.42931248229090196, 0.4088790801254196, 0.388389391939393, 0.36795179145053275, 0.3476686870155601, 0.32763578243376934, 0.30794146359709057, 0.288666313496316, 0.26988275565011915, 0.2516548237196403, 0.23403805295152275, 0.21707948719385872, 0.20081779358192822, 0.18528347561510858, 0.17049917425564357, 0.15648004587882092, 0.14323420538945944, 0.1307632225814578, 0.1190626598392077, 0.10812263954041262, 0.09792842999345658, 0.08846103939997974, 0.07969780814361545, 0.07161299063678907, 0.06417831897683102, 0.057363541738973275, 0.05113693233729595, 0.04546576248778323, 0.040316737385615496, 0.035656390240083526, 0.031451434776970426, 0.027669075205349968, 0.024277273942556778, 0.021244978090104335, 0.01854230625037641, 0.01614069776781578, 0.014013026870604623, 0.01213368448330337, 0.010478630683371588, 0.009025420892231873, 0.007753208933006081, 0.006642730061455654, 0.0056762669936145475, 0.004837601822833305, 0.004111956549991866, 0.0034859247526226496, 0.0029473967001460246, 0.002485479991154406, 0.0020904175516451773, 0.0017535045963510698, 0.0014670059239780112, 0.0012240746954412796, 0.001018673635405657, 0.0008454994040622246, 0.0006999107098184589]}],
         {"showlegend": false, "template": {"data": {"scatter": [{"type": "scatter"}]}}, "title": {"text": "Total Volume: Histogram and Normalized-Density"}},
         {"responsive": true}
     )
 };

</script>
</div>
 </body>
</html>`

ngOnInit() { }

}

In the above JSON data if I add for example <h1> or <p> tag its showing h1 and p tag content on Angular 8 but not displaying plotly plot. I think there is some issue displaying the plotly plot. Do I need to install any additional package to do this, as I already install plotly.js for my angular project.

Bollate

[ANSWERED] css – How to bind html in Angular 8

By

Solution 1 :

Problem :

Comments

Comment posted by therichpost.com/angular-7-include-html-template-working-example

Comment posted by webpack.js.org/concepts#loaders

Comment posted by Saheb Ghosh

Comment posted by Minimal, Reproducible Example

Comment posted by Saheb Ghosh

By

Related Post

[ANSWERED] html – Trying to align a div to the right using CSS

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] html – select all elements within a parent class

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate