Angular4 Load external html page in a div

Question

I had an application in angular1 and I was using jquery to load an external page in my HTML element. This is the html of my container element:

<div id="externalContainer" class="text-center">
</div>

I used the following script to load the external page.

$( "#externalContainer" ).load( myExternalPageLink );

Now this doesn't seem to work in angular4, can experts guide me how can I achieve this functionality in angular4?

I know that I am a little late to the party here, but I came across this question while trying to solve my own problem and wanted to share in case someone else had the same issue. I was trying to also allow custom components to be used in our external html for our blog. I documented it all on our [blog (dynamically generate angular components from external html)](https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html). Hopefully this is moderately helpful to the next person who comes across this. — Amos47, May 08 '18 at 20:04

score 11 · Answer 1 · answered Oct 10 '17 at 06:37

11

You can use [innerHtml] something like

<div [innerHtml]="myTemplate">
</div>

In your component

export public class MyComponent {
    private myTemplate: any = "";
    constructor(http: Http) {
        http.get(myExternalPageLink).map((html:any) => this.myTemplate = html);
    }
}

answered Oct 10 '17 at 06:37

jitender

10,238
1
18
44

3

Can i load a local file with this ? – Awais Ashraf Oct 10 '17 at 07:17
2

I tried loading a local file with this, but the myTemplate variable is empty. – Awais Ashraf Oct 10 '17 at 07:18
how about the inline, external style/css ? i cannot see the effects. – Vunb Dec 07 '17 at 02:23
@Vunb You cannot see inline styles because the content is sanitised. – Radu Cojocari Jan 03 '18 at 20:38
3

@RaduCojocari i used safeHtml Pipe then it worked fine! See https://stackoverflow.com/a/39794649/1896897 – Vunb Jan 05 '18 at 10:55
@Vung Yes. that will definitely work. The compromise is the fact that you are opening yourself up to security issues. If you don't care about it, then your solution makes sense – Radu Cojocari Jan 05 '18 at 11:16
What if there are jquery/javascript functions running in the external html page, will they run? – skydev Dec 04 '18 at 11:09
@skydev no jquery/javascript will not work here for that you can [dyanmically add js script](https://stackoverflow.com/a/42766146/5621827) – jitender Dec 04 '18 at 11:22
1

I'm newby with angular 8. An error appears in _cmd_ `error TS2304: Cannot find name 'Http'`. Do i have to import it somewhere? – Memmo Oct 19 '19 at 09:07
1

@jitender thanks, this works like I need and its implementation is very simple. – Marco Barbero Nov 28 '19 at 09:44

Angular4 Load external html page in a div

1 Answers1

Linked