Retrieve html from server and display with Angular

Question

I'm trying to retrieve HTML from a REST service and display it using Angular (4.3). I can watch the service get called and return the correct content. However, the angular component using this never seems to actually receive the content. What have I missed?

Specifically a console.log(html) (in the second code sample below) always outputs null.

I have an angular service that looks like:

@Injectable()
export class SlidesService {

    private requestUrl: string;

    constructor(
        @Inject(AppConfig) private config: AppConfig,
        @Inject(HttpClient) private http: HttpClient) {
        this.requestUrl = this.config.restRoot + listSlidesUrl;
    }


    getSlide(deck: string, slide: string): Observable<string> {

        const headers: HttpHeaders = new HttpHeaders({'Accept': 'text/html'});
        const thisUrl: string = this.requestUrl + '/' + deck + '/' + slide;

        return this.http.get<string>(thisUrl, { headers: headers });
    }
}

This is used by a component:

export class SlidePreviewComponent implements OnInit {

    @Input() slide: string;     /* Identifier for the slide */
    @Input() deck: string;
    slideHtml: string;


    constructor(private slideService: SlidesService) {

      }

    ngOnInit(): void {
        this.slideService.getSlide(this.deck, this.slide)
            .subscribe(html =>  this.setSlideHtml(html) );
    }

    setSlideHtml(html: string) {
        this.slideHtml = html;
        console.log(html);
    }
}

How are you watching the service get called/return the correct content (console.log in service, console.log in subscribe, or are you looking at your browser's XML)? First guess is that the returned response is an object not a string so it doesn't know how to parse, but there's not enough info here to pinpoint. — Z. Bagley
– Z. Bagley, Commented Sep 20, 2017 at 16:46
Watching as in "I've got the application server running locally and I'm tracing the outputs" — Nic Gibson
– Nic Gibson, Commented Sep 20, 2017 at 16:59

Ján Halaša · Accepted Answer · 2017-09-20 16:47:20Z

15

The new HttpClient class expects the get() method to return JSON response. If you expect a text (HTML), it's necessary to specify it in the request options:

this.http.get(thisUrl, { headers: headers, responseType: 'text' });

The special Accept header may be unnecessary then.

answered Sep 20, 2017 at 16:47

Ján Halaša

8,4961 gold badge40 silver badges37 bronze badges

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

Comments

Robert · Accepted Answer · 2017-09-20 16:50:41Z

8

Hi can you try this in service

 getSlide(deck: string, slide: string){
   const thisUrl: string = this.requestUrl + '/' + deck + '/' + slide;
   return this.http
        .get(url ,{ headers: headers, responseType: 'text' })
        .toPromise()
        .then(resp => resp.text())
        .catch(error=>console.log(error))
}

and your component

ngOnInit(): void {
        this.slideService.getSlide(this.deck, this.slide)
            .subscribe(html =>  this.setSlideHtml(html) );
    }
setSlideHtml(html) {
        this.slideHtml = html;
        console.log(html);
    }

in your template

<div id="scroll" [innerHTML]="slideHtml"></div>

answered Sep 20, 2017 at 16:50

Robert

3,4831 gold badge21 silver badges37 bronze badges

1 Comment

Nic Gibson Over a year ago

That also solved the problem but the accepted one changes my code a great deal less. Thanks.

Collectives™ on Stack Overflow

Retrieve html from server and display with Angular

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related