Angular2 include html from server into a div - html

Question

I got a serie of html in my server. For example:
http://docs.example.com/intro.html
http://docs.example.com/page1.html
http://docs.example.com/page2.html
And I trying to include those files into a<div> in my angular2 v4 app. For example:
component.ts
public changePage(name: string) {
switch (name) {
case 'intro': this.myHtmlTemplate = 'http://docs.example.com/intro.html'; break;
case 'page1': this.myHtmlTemplate = 'http://docs.example.com/page1.html'; break;
case 'page2': this.myHtmlTemplate = 'http://docs.example.com/page2.html'; break;
}
}
component.html
<div [innerHtml]="myHtmlTemplate"></div>
but it doesnt work. I tried the following solutions:
Angular4 Load external html page in a div
Dynamically load HTML template in angular2
but it doesn't work for me. Can somebody help me with this problem please ?

Answer 1

Angular security Blocks dynamic rendering of HTML and other scripts. You need to bypass them using DOM Sanitizer.
Read more here : Angular Security
DO below changes in your code :
// in your component.ts file
//import this
import { DomSanitizer } from '#angular/platform-browser';
// in constructor create object
constructor(
...
private sanitizer: DomSanitizer
...
){
}
someMethod(){
const headers = new HttpHeaders({
'Content-Type': 'text/plain',
});
const request = this.http.get<string>('https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form', {
headers: headers,
responseType: 'text'
}).subscribe(res => this.htmlString = res);
this.htmlData = this.sanitizer.bypassSecurityTrustHtml(this.htmlString); // this line bypasses angular security
}
and in HTML file ;
<!-- In Your html file-->
<div [innerHtml]="htmlData">
</div>
Here is the working example of your requirement :
Working Stackblitz Demo

Answer 2

This should do it:
First in your component.ts get the html with a http request:
import { Component, OnInit } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { map } from 'rxjs/operators'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }
htmlString: string;
ngOnInit() {
const headers = new HttpHeaders({
'Content-Type': 'text/plain',
});
const request = this.http.get<string>('https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form', {
headers: headers,
responseType: 'text'
}).subscribe(res => this.htmlString = res);
}
}
And in your component.html simply use a one way data binding:
<div [innerHTML]="htmlString"></div>

Answer 3

You actually want to display a page inside your angular app right?
For that you can add a iframe tag:
<iframe width="400" height="600" [src]="myHtmlTemplate"></iframe>

Answer 4

you have to get HTTP call to load HTML in plain text and load in div using innerHtml.
export class AppComponent implements OnInit {
name = 'Kissht';
KisshtHtml;
constructor(
private http:HttpClient,
private sanitizer:DomSanitizer){ }
ngOnInit(){
this.http.get('https://kissht.com/',
{responseType:'text'}).subscribe(res=>{
this.KisshtHtml = this.sanitizer.bypassSecurityTrustHtml(res);
})
}
}
Sometime you might get CORS issue in stackblitz whil loading external Html
https://stackblitz.com/edit/display-external-html-into-angular

Answer 5

In your component first request pages with HTTP request
this.http.get('http://docs.example.com/intro.html').map(response => response.text()).subscribe(html => Your_template = html);
use innerhtml with the safehtml pipe so your inline styling will be applied
more info on GitHub page(https://gist.github.com/klihelp/4dcac910124409fa7bd20f230818c8d1)
<div [innerHtml]="Your_template | safeHtml"></div>