title: Angular Show HTML response data into view
body: <p>Hello i am new to angular and i can not figure it out to show html response data in component below is my code please someone help with this.
  Thanks</p>
  
  <p><strong>data.Service.ts</strong> (here i call an API service which return some html)</p>
  
  <pre><code>getLibrary() {return this.http.get('http://localhost:8000/api/user/library');}
  </code></pre>
  
  <p><strong>Library.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DataService } from '../data.service';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-library',
    templateUrl: './library.component.html',
    styleUrls: ['./library.component.scss']
  })
  export class LibraryComponent implements OnInit {
  
    library: any;
  
    constructor(private data: DataService) { }
  
    ngOnInit() {
      this.data.getLibrary().subscribe(
        data =&gt; this.library = data 
  
      );
  
  
  
    }
  
  }
  </code></pre>
  
  <p><strong>Library.component.html</strong></p>
  
  <pre><code>{{library}}
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <pre><code>core.js:14576 ERROR 
  HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8000/api/user/library", ok: false, …}
  error: {error: SyntaxError: Unexpected token &lt; in JSON at position 0 at JSON.parse (&lt;anonymous&gt;) at XMLHttp…, text: "&lt;div style="display:block" class="libContainer lib…            
  ↵           &lt;/div&gt;
  ↵
  ↵
  ↵&lt;/div&gt;
  ↵
  ↵
  ↵
  ↵
  ↵
  ↵
  ↵
  ↵
  ↵"}
  headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
  message: "Http failure during parsing for http://localhost:8000/api/user/library"
  name: "HttpErrorResponse"
  ok: false
  status: 200
  statusText: "OK"
  url: "http://localhost:8000/api/user/library"
  __proto__: HttpResponseBase
  </code></pre>