I am using following code to import external html page in angular component but data comes in the form of text i have few controls in external html page as well as local css and js file path so i want interact with those controls on my component once it get loads. I tried changing 'responseType' with available options but not working.
Following is code from angular component to import external html.
http.get('assets/included.html', { responseType: 'text' }).subscribe(data => this.externalHtml = data);
Following code is from external html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/all.css">
<script type="text/javascript" src="./js/show.js"></script>
<link rel="stylesheet" href="./assets/css/styles.css">
</head>
<body>
<div class="layout-wrapper">
<div id="layout-topbar">
<div class="logo">
<h1 class="feature-title">Web Components</h1>
</div>
<div style="margin-top:10px;">
<h6>Text field:</h6>
<clx-textfield style="width:500px;" id="textFieldParameter"></clx-textfield>
</div>
<div class="resize-div">
<clx-fader fill="true" show-scale="true" orientation="Horizontal"
min="0" max="1" id="faderControl">
</clx-fader>
</div>
</div>
</div>
</body>
</html>
Right now only plain html page is loading without controls and javascript so page is not interactive. how i can make all.css,show.js working after importing html in component.
I did not found any answer nor get reply on this post so i done work around for this is as follow.
http.get('assets/included.html', { responseType: 'text' }).subscribe(
data => this.externalHtml = this.sanitizer.bypassSecurityTrustHtml(data)
);
in HTML page
<div [innerHtml]="externalHtml"></div>
Here js and css wont load so used following code to load them.
this.loadJsCssFile("assets/assets/js/prism.js", 'script');
this.loadJsCssFile("assets/assets/css/styles.css", 'css');
public loadJsCssFile(url: any, type: string) {
let node:any;
if (type === 'script') {
node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
} else {
node = document.createElement('link');
node.href = url;
node.rel = 'stylesheet';
}
document.getElementsByTagName('head')[0].appendChild(node);
} ````