Angular2 include html from server into a div

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 ?

Baguio

This is not at how you should be doing this. Look at concretepage.com/angular-2/… – Adenocarcinoma

Thanks @Adenocarcinoma But I'm looking for a solution where the html templates are on a different server than the angular application and only imported through the link. The html templates must be independent of the application in angular. – Baguio

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

Vassily

I like your solution. Unfortunately it doesn't work for all .html files. Even in the stackblitz demo, returns console errors. If you have another solution in any other way (except an iframe), I would like to know. Thank you – Baguio

@SergioMendez that is because the website didn't send the html response (may be due to cross origin request). If you have list of the websites which returns the html content. The above solution will definitely work. – Vassily

Thank you very much. You Really helpme to find the solution. – Baguio

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> 

Agamete

Sure I tried. Then the "responseType: 'text'" returns the following error: Type '"text"' is not assignable to type '"json"'.ts(2322) client.d.ts(639, 9): The expected type comes from property 'responseType' which is declared here on type ... – Baguio

you have to set "responseType: 'text' as 'json'" to fool the typescript transpiler – Colene

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>

Woolley

thank you very much, I'm avoiding the <iframe> becouse I have some styles into the angular App, that I need to appear into the template.html from server. What I need is a way to go to docs.example.com/page2.html and practically convert that file in plain text to put using [innerHtml] so the angular styles aply to this section – Baguio

Answer 4

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>

Petromilli

Answer 5

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

Massachusetts