This is an example usage of RxDB with Angular. It implements a simple heroes-list which can be filled by the user. Also it uses angular-universal to enable server side rendering.

1. clone the whole RxDB-repo
2. go into project cd rxdb
3. run npm install
4. go to this folder cd examples/angular
5. run npm run preinstall && npm install
6. run npm start
7. Open http://127.0.0.1:4200/ IMPORTANT: do not use localhost

• Make sure you have the window polyfills added that are needed for some plugins.

// in polyfills.ts
(window as any).global = window;
(window as any).process = {
    env: { DEBUG: undefined },
    nextTick: (fn, ...args) => setTimeout(() => fn(...args)),
};

• Make sure you have used the rxjs-zone.js patch otherwise the change detection will not work properly. For that you should put the following code into your app.component.ts:

//> app.component.ts
/**
 * IMPORTANT: RxDB creates rxjs observables outside of angulars zone
 * So you have to import the rxjs patch to ensure changedetection works correctly.
 * @link https://www.bennadel.com/blog/3448-binding-rxjs-observable-sources-outside-of-the-ngzone-in-angular-6-0-2.htm
 */
import 'zone.js/plugins/zone-patch-rxjs';

• The example includes the database viewer devtool. Click the round button in the bottom right corner to inspect the database. The viewer is mounted outside of the angular zone (see src/app/components/db-viewer/), so its internal timers do not trigger change detection.

Read more about using RxDB as Angular Database