1

I am trying to embed a Hosted HTML page in my angular app. However the div is coming back blank. I followed this article and modified the code for angular 7 to no avail Angular4 Load external html page in a div

I console log out the result but it shows empty

My code is a as follows

  template: any = '';
  constructor(http: HttpClient) {
      http.get('http://www.google.com').map((html: any) => this.template = html);
      console.log(this.template);
  }


  <div [innerHtml]="template"></div>
skydev
  • 1,867
  • 9
  • 37
  • 71

1 Answers1

1

You need to subscribe to the observable in order to receive the data.

http.get('http://www.google.com').subscribe((html: any) => {
   this.template = html
   console.log(this.template);
});
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • I believe that is done automatically when using `map`. Probably he needs to change his syntax to use pipeable operators. – enf0rcer Dec 03 '18 at 15:38
  • In order to fire up the observable (including map), we need to use the subscribe method – Sachila Ranawaka Dec 03 '18 at 15:39
  • @enf0rcer I add the content inside the `susbcribe` function since i don't see why we need `map` operator in here. But if he is using it then, yes we need to use the pipeable operator – Sachila Ranawaka Dec 03 '18 at 15:41
  • I get an error `error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse` and message "Http failure during parsing for https://www.google.com/" – skydev Dec 03 '18 at 15:41
  • @SachilaRanawaka you are right it makes no sense in this context – enf0rcer Dec 03 '18 at 15:42
  • @skydev i think what u need is iframe here `` instead of passing http request – Sachila Ranawaka Dec 03 '18 at 15:43
  • ok thanks this works, I'll just now need to find a way to get values from the iframe – skydev Dec 03 '18 at 15:49
  • You'll have to use **[`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)** for that. – SiddAjmera Dec 03 '18 at 15:50