Category: JavaScript

Angular 6 and RxJS: Multiple API Calls Simultaneously

Angular 6 and RxJS are fantastic tools for developing single page web applications. In Angular 6, a problem we often face, is multiple components require some set of shared data. Sure, we could copy and paste the individual service calls, but that’s not the best approach. We should really be trying to centralize shared data requests.

First, we need to make a wrapper object to encapsulate the requested data:

export interface IDataCollection {
    data?: IApiResponse<Data[]>;
    secondData?: IApiResponse<SecondData[]>;
}

The next thing to do is make the request function:

/** Static for example simplicity **/
export class DataCollectionService {
    public static getDataCollection(dataService: DataService): Observable<IDataCollection> {
        return Observable.forkJoin(
            dataService.getData(),
            dataService.getSecondData(),
        ).map(response => {
                let dataCollection = {
                    data: response[0],
                    secondData: response[1]
                 } as IDataCollection;
                 // More logic goes here.

                 return dataCollection;
            }
        );
    }
}

Now, all you need to do is subscribe to the observable:

DataCollectionService.getDropdownCollection(this.dataService).subscribe(
            (dataCollection: IDataCollection) => {
                this.data = dataCollection.data;
                this.secondData = dataCollection.secondData;
                // More logic goes here.

            },
            // Should be global error handler in your app.
            (err: any) => console.log(err),
            // Should be your logging framework here
            () => "Retrieved data for dropdown boxes."
);

That’s it! You’ve combined multiple service calls into one concise function.

Let me know if this worked for you.

VideoJS Error: VideoJS showing HTML5 video player with AngularJS

Recently, I was trying to integrate VideoJS into a personal project. I followed the getting started guide located at http://videojs.com/getting-started/ to no avail.

If this works for you, great! But if you are getting the standard HTML5 video player, try to instantiate VideoJS via JavaScript. In your angular controller, add this:

        var video;
        $scope.$on('$destroy', function () {
            // Destroy the object if it exists
            if ((video !== undefined) && (video !== null)) {
                video.dispose();
            }
        });
  
        // Where my-video-id is the id in the video tag from the getting started guide
        videojs("my-video-id").ready(function () {
            video = this;
            // Replace $scope.video.url with your video url
            // Replace $scope.videos.type with your video type, for example, 'video/mp4'
            video.src({src: $scope.videos.url, type: $scope.videos.type});
        });

I’ve seen this recommended for when the video “is only loaded on hard refresh”. For me, the standard HTML5 video player was always showing, even when hard refreshing the page. Adding the above code caused the VideoJS player to load instead of the standard HTML5 player.

That’s it! You should be using the VideoJS player instead of the standard HTML5 player.

Sources: