I am facing an issue with displaying HTML content in Angular 8.
**Note: The HTML template I receive from the database as JSON data needs to be displayed in Angular. I am fetching this template and saving it in a variable (e.g., plot), then passing that variable to
this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(this.plot)For demonstration purposes, I have provided a sample HTML template similar to the data fetched from the database.
HTML:
<div [innerHTML]="myTemplate"></div>
app.component.ts:
import { Component, OnInit} from '@angular/core';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';
@Component({
selector: 'app-data-decomposition',
templateUrl: './data-decomposition.component.html',
styleUrls: ['./data-decomposition.component.css']
})
export class DataDecompositionComponent implements OnInit {
myTemplate:SafeHtml;
constructor(private sanitizer: DomSanitizer) { }
this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(`<html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<p>plot come below...</>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
<script type="text/javascript">
var data = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}
];
Plotly.newPlot('myDiv', data);
</script>
</body>
</html>`);
}
Despite running the code, only the content within the <p> tag "Plot come below.." is visible on the Angular front-end. The Plotly chart within the <script> tag is not being displayed. Any suggestions on where I might have made a mistake would be greatly appreciated.