Angular Show HTML response data into view

Question

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

data.Service.ts (here i call an API service which return some html)

getLibrary() {return this.http.get('http://localhost:8000/api/user/library');}

Library.component.ts

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 => this.library = data 

    );



  }

}

Library.component.html

{{library}}

Error

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 < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttp…, text: "<div style="display:block" class="libContainer lib…            
↵           </div>
↵
↵
↵</div>
↵
↵
↵
↵
↵
↵
↵
↵
↵"}
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

what does the response look like? please add to code. not looking like a JSON response — dev-dan
– dev-dan, Commented Dec 17, 2018 at 11:10

bhaghyasandar · Accepted Answer · 2018-12-17 11:23:25Z

2

returned datatype is text you can use like this

 ngOnInit() {
        this.data.getLibrary().subscribe(
          (data:(any)) => this.library = data 

        );

in view

<div [innerHTML]="library"></div>

edited Dec 17, 2018 at 11:23

answered Dec 17, 2018 at 11:17

bhaghyasandar

5164 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sunil Meena Over a year ago

yes now html is rendered on view after using json_encode(); but not rendering as HTMl its rendering as text on view

bhaghyasandar Over a year ago

in view use <div [innerHTML]="library"></div>

Sunil Meena Over a year ago

Thank u so much its working now..have a great day :)

Collectives™ on Stack Overflow

Angular Show HTML response data into view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related