Search code examples
angularangular-httpclient

How to load external html or specific location html file in to angular 10


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.


Solution

  • 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);
      }  ````