close
Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

README.md

License: MIT TypeScript lerna--lite npm npm

RxJS Observable Service Wrapper

@slickgrid-universal/rxjs-observable

An RxJS Observable Service Wrapper to make it possible to use RxJS with Slickgrid-Universal (with a Backend Service like OData/GraphQL). By default any Backend Service will be using Promises unless we use this RxJS Observable package.

This package is simply a bridge, a facade, to make it possible to use RxJS without adding RxJS to the @slickgrid-universal/common list of dependencies, so RxJS is a dependency of this package without being a dependency of the common (core) package, This will avoid adding dependencies not everyone need and won't clutter the common package (the common package will simply use an empty interface, which won't do anything, without requiring to install RxJS at all. We also have full unit tests coverage for all of that).

External Dependencies

Installation

Follow the instruction provided in the main README, you can see a demo by looking at the GitHub Demo page.

Usage

In order to use the Service, you will need to register it in your grid options via the externalResources as shown below and of course install RxJS itself (this package requires RxJS 7).

ViewModel
import { GridOdataService } from '@slickgrid-universal/odata';
import { RxJsResource } from '@slickgrid-universal/rxjs-observable';

export class MyExample {
  gridOptions: GridOption;

  initializeGrid {
    this.gridOptions = {
      // you will most probably use it with a Backend Service, for example with OData or GraphQL
      backendServiceApi: {
        service: new GridOdataService(),
        preProcess: () => this.displaySpinner(true),
        postProcess: () => this.displaySpinner(false),

        // assuming your Http call is with an RxJS Observable
        process: (query) => this.getAllCustomers$(query),
      } as OdataServiceApi,

      // ...
      externalResources: [new RxJsResource()],
    };
  }
}