I want to load the html from my asset folder in between my html file of angular. For eg: Suppose this is my product.html of product component and detailPara.html and BlockPara.html are in assets folder which I have to add in between the product.html:

<div >
....
<div innerHTML="../assets/product/detailPara.html"></div>
....
<div innerHTML="../assets/product/BlockPara.html"></div>
</div>

Can someone please help me.

CodePudding user response：

Hello Rinki I am my posting answer If you any question then comment me I will response you.

So First thing Create a component with name detailPara check below command to create detailPara

ng generate component detailPara

OR

ng g c detailPara

both are same after that paste your detailPara.html code to that detailPara component and same for BlockPara.html create component with below command

ng generate component BlockPara

OR

ng g c BlockPara

and paste BlockPara.html code to BlockPara component

and Final use like this

<div >
  <app-detail-para></app-detail-para>  // check before pasting

  <app-block-para></app-block-para>    // check before pasting
</div>

---

Second Way

Using JavaScript

 document.getElementById('detailPara').innerHTML =
      '<object type="text/html" data="assets/detailPara.html" ></object>';

    document.getElementById('blockPara').innerHTML =
      '<object type="text/html" data="assets/BlockPara.html" ></object>';

<div class="productPage">
  <div id="detailPara"></div>

  <div id="blockPara"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here you can check stackblitz Code

CodePudding user response：

you can use it Like this.

let path = 'assets/'   {fileName}   '.html';
this._httpClient.get(path, {responseType: "text"}).subscribe(
data => {
//now you have the file content in 'data'
this.content = this.sanitizer.bypassSecurityTrustHtml(data);
});

just inject the DOMSanitizer in the constructor and you are good to go!!

and then in your HTML file.

<div >
....
<div [innerHTML]="content"></div>
....