7

I need to create a component that displays the content of another webpage.

So for instance if I have the site of stackoverflow, I would like to create a component that does a http request and displays the content through my app. By the way, the external website is just django-rest-swagger and to access it, I need to include a header everytime I access it. So, when I make the request for the external site content I need to inlclude the header x-forwarded-host.

<div>
     <html> CONTENT OF EXTERNAL WEBSITE </html>
</div>

thank you

Pat
  • 2,452
  • 1
  • 22
  • 26
Miguel Rosales
  • 679
  • 2
  • 12
  • 27

3 Answers3

6
@Component({
  selector: ...
  template: `<div [innerHTML]="fetchedHtml"></div>
})
export class ExternalHtml {
  constructor(http:Http) {
    var headers = new Headers();
    headers.append('x-forwarded-host', 'foo');
http.get('someUrl', {headers: headers}).subscribe(response => {
    this.fetchedHtml = response.json();
  }
}

See also

Alternatively you can also use an iframe to display the fetched HTML.

Community
  • 1
  • 1
Günter Zöchbauer
  • 558,509
  • 191
  • 1,911
  • 1,506
  • can we actually load / embed an external website content inside a component's template on the fly.. ? If so could you explain how we can achieve that. – mperle Sep 01 '17 at 19:56
  • Not as easy as many expect but possible https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular There is a 3rd party project that wraps this in an easy to use component. Sorry, cant remember the name, but saw it mentioned on several andwers to this topic – Günter Zöchbauer Sep 01 '17 at 20:00
  • Okay. let me check that and try to implement based on my requirement. – mperle Sep 01 '17 at 20:17
  • can you guide me on this one https://stackoverflow.com/questions/46243651/custom-modal-dialog-with-dynamic-template-angular-material – mperle Sep 15 '17 at 18:10
0

You can display it as follows: 

<div [innerHTML]="contentOfTheExternalWebsite">
</div>
Lucas Tétreault
  • 953
  • 5
  • 15
0

I replied to a similar question in this post

Loading External URL in Angular2 router-outlet

You can see my answer by following the above link

Community
  • 1
  • 1
mspasiuk
  • 572
  • 1
  • 5
  • 22