How to receive HTML response from an API and bind it to view template in Angular 7.

Question

my API call's response is HTML document and I need to bind the html response to my angular's template. I tried it using below observable code and no luck. Any help please.

Service method:

getResults(): Observable<string> {
     return this.http.get<any>('https://stackoverflow.com/questions/tagged/angular');
  }

Subscribe in the component:

ngOnInit() {
    this._apiService.getResults()
    .subscribe(data => {
      this.results = data;
    },
    error => console.log('Error from backend API', +error));
  }

Answer 1

If I understend the problem correctly in response you get html code for example:

<div>Some text</div>

And you want to add that inside of your template.? So first of all you have to modify your get call. Get, by default, expect the json in response. What you have to do is this:

getResults(): Observable<string> {
     return this.http.get<string>('https://stackoverflow.com/questions/tagged/angular',{responseType: 'text'});
  }

and second in the template:

<div class="one" [innerHtml]="htmlToAdd"></div>

and then in the subscriber

ngOnInit() {
    this._apiService.getResults()
    .subscribe(data => {
      this.innerHtml = data;
    },
    error => console.log('Error from backend API', +error));
  }

---

if this is a CORS problem you have to set the proxy if you work in local environment. Go and create proxy.conf.json.

{
  "/questions/tagged/angular": {
    "target": "https://stackoverflow.com/questions/tagged/angular",
    "secure": false
  }
}

change the url:

getResults(): Observable<string> {
     return this.http.get<any>('/questions/tagged/angular');
  }

and the run your app with ng serve --proxy-config proxy.conf.json

Answer 2

What Cors means that, if you try to access say https://stackoverflow.com/questions/tagged/angular , you are only allowed to make that request only when window URL is https://stackoverflow.com . The URL you see in your browser while making a request is called origin . When you request from localhost, it will get blocked, since localhost and https://stackoverflow.com are different. And this is controlled by a response header called access-control-allow-origin . This will be set by that particular site which you are visiting. We cannot change this. You can read more about this at MDN - CORS .

So for development purpose you can setup a simple local server to return a html file. Or try accessing a site, which doesnt set access-control-allow-origin flag.

For example, Mozilla site, allows access from all, hence if you try changing from stackoverflow.com to https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS it will work.

You can check whether an site allows cross access in network tab. See the below pic. If its * all is allowed, or only the mentioned urls will be allowed.

Also note, angular by default considers all request to be json . If you are reading other types such as html , you need to specify that using {responseType: 'text'} as second argument.

this.http.get('https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS', {responseType: 'text'})
  .subscribe(data => {
    console.log(data);
  }, error => {
    console.log(error);
  });;

See Stackblitz live example