I am facing a challenge in Angular 8 with displaying HTML content. The app I'm building in Angular 8 has a Flask backend that sends JSON data containing an HTML template to the frontend. My goal is to render this template in Angular.
Here is the JSON data being received:
`
<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,...
` The issue arises when trying to display the plot within the above HTML template in Angular. Saving the same template as a .html file and opening it in a browser successfully displays the plot. However, the plot does not render in Angular 8, even though the HTML template is present.
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(
...
Upon adding tags like <h1> or <p>, the content appears correctly in Angular 8. However, the Plotly plot within the HTML template doesn't display. Do I need to install additional packages for this functionality, considering I've already installed plotly.js for my Angular project?