RxJS Angular 2 Syntax

Question

I am currently doing some reading on the RxJS libraries and taking some time to go through some of the classes offered by some of its architects and contributors with the goal of incorporating this knowledge into an angular2 application. I am finding it difficult though because I can't seem to figure out how to change the syntax so I can use RxJS like i am seeing in any of the examples that aren't angular2 specific. For instance, if I try to create an observer in a constructor:

this.$mouseObserver = Rx.Observer.create(
      function (x) {
     console.log('Next: %s', x);
   },
   function (err) {
     console.log('Error: %s', err);
   },
   function () {
     console.log('Completed');
   });

Rx always comes up undefined, even after importing it. Observer and Observable import fine, as well as the methods for them. Am i missing something basic? Every piece of documentation for RxJS starts almost everything with Rx. but I haven't seen a single Angular 2 tutorial that uses that syntax.

Can Nguyen · Answer 1 · 2016-07-15T17:53:28.437

1

If you:

import { Observer } from 'rxjs/Observer';

or:

import { Observer } from 'rxjs/Rx';

you'll use Observer.create (without Rx.). To use Rx.Observer, you need to import * as Rx from 'rxjs/Rx';

Importing individual classes/objects is usually preferred, that's why you see more imports of that form. The Rx. form is usually seen where Rx library is not imported (e.g project is not built in node environment), but referenced from a <script src="..."> tag

EDIT: In answer to C. Kearns's comment:

Observer, in RxJS 5 type definition, is an interface. It has no implementation, and it doesn't get compiled to javascript. Thus you can't call any function of it. The interface is declared as:

export interface Observer<T> {
    isUnsubscribed?: boolean;
    next: (value: T) => void;
    error: (err: any) => void;
    complete: () => void;
}

In your case, declare $mouseObserver as Observer<any> and this should work:

this.$mouseObserver = {
  next: function (x) {
    console.log('Next: %s', x);
  },
  error: function (err) {
    console.log('Error: %s', err);
  },
  complete: function () {
    console.log('Completed');
  }
};

edited Jul 15 '16 at 17:53

answered Jul 15 '16 at 06:09

Can Nguyen

1,470
10
11

this makes a lot of sense. However, importing just Observer, and using `this.$mouseObserver= Observer.create` I get the error: `cannot find name 'Observer'`, and importing `import * as Rx from 'rxjs/Rx';` and using `Rx.Observer.create` gives me the error `property observer does not exist on typeof – C. Kearns Jul 15 '16 at 16:51
Does this go for Observables as well. I have the exact similar issue with using `Rx`. I wanted to create an Observable from an array but somehow got stuck at `Rx`. I have a question here `http://stackoverflow.com/questions/43177833/unable-to-import-rx-to-my-angular-2-application` , @Can Nguyen can you provide an answer ? – Saurabh Tiwari Apr 03 '17 at 11:16
With the suggested imports, while using Observable.from([1,2,3]). I get an error on `from`. Importing `from` from `import 'rxjs/add/observable/from'` doesn't help either. – Saurabh Tiwari Apr 03 '17 at 11:19

RxJS Angular 2 Syntax

1 Answers1