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 class="productPage">
....
<div innerHTML="../assets/product/detailPara.html"></div>
....
<div innerHTML="../assets/product/BlockPara.html"></div>
</div>
Can someone please help me.
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 class="productPage">
....
<div [innerHTML]="content"></div>
....
Firstly, 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 finally use like this:
<div class="productPage">
<app-detail-para></app-detail-para> // check before pasting
<app-block-para></app-block-para> // check before pasting
</div>
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>Here you can check Stackblitz.
