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,540
  • 1
  • 21
  • 28
Miguel Rosales
  • 769
  • 4
  • 13
  • 29

2 Answers2

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
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 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