Call Angular 5 service method from Vanilla JS JSONP callback

Question

I'm calling the Flickr API from a service method. Flickr expects a global function expression to be available called jsonFlickrFeed, which I've placed in my app root index.html file immediately after the root component and before the closing body tag. I need to pass the response from the Vanilla JS callback back to the originating service.

It reaches the callback fine, but I'm really struggling to find any information how to get back to the service that's specifically relevant to Angular 5.

Here's my service

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import 'rxjs/add/operator/map';

import * as validResponse from './mock/valid.json';
import {FlickrItem} from "./flickr-item";
import {FlickrResponse} from "./flickr-response";

@Injectable()
export class FlickrService {
    private url: string = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json';
    private items: FlickrItem[];
    private response: FlickrResponse;

    constructor(private http: HttpClient) { }

    getValid() {
        // Return mock response
        // For development / debug use only
        // return validResponse;

        this.http.jsonp(this.url, 'jsonFlickrFeed').subscribe();
    };
}

Florian D · Accepted Answer · 2018-03-01 11:45:03Z

1

As said here: Communication between angular 2 and pure javascript

You can define the callback inside the service using window:

@Injectable()
export class FlickrService {
...
  constructor(...) {
    window.jsonFlickrFeed = data => {
      // do something
    }
  }
}

answered Mar 1, 2018 at 11:45

Florian D

2311 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

Call Angular 5 service method from Vanilla JS JSONP callback

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related