CODEWITHSUNDEEP
angularrxjsangular-cli
JohnDizzle
JohnDizzle

Reputation: 1338

Problems using rxjs inside Angular2 CLI project

I created a new Angular2 project using Angular CLI v1.1.3 and Node v6.11.0. I wanted to create a simple rxjs example using rxjs v5.4.2 (automatically installed by angular CLI).

Here is my App.component.ts file with my code:

import { Component } from '@angular/core';
import { Observable} from 'rxjs/observable'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private obs: Observable) {
    obs.fromEvent(document, 'click')
      .filter(function(c) {return c.clientX > window.innerWidth / 2 })
      .take(10)
      .suscribe(function(c) {console.log(c.clientX, c.clientY) })
  }
}

This is the Error message I receive:

ERROR in .../src/app/app.component.ts (11,28): Generic type 'Observable<T>' requires 1 type argument(s).

Q: How to get this example running properly using rxjs?

The example suggests using 

Rx.Observable.fromEvent(document, 'click')
          .filter(function(c) {return c.clientX > window.innerWidth / 2 })
          .take(10)
          .suscribe(function(c) {console.log(c.clientX, c.clientY) })

How do I achieve to get the example running using Rx.?

Edit 2: fixed the rxjs issues but now c.clientX and c.clientY isn´t working anymore. When I hover over clientX in the IDE it tells me Property clientX does not on type {}.

import { Component } from '@angular/core';
import { Observable} from 'rxjs/observable';
import { Operator } from 'rxjs/operator';

import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/filter';
import 'rxjs/add/observable/suscribe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {
    Observable.fromEvent(document, 'click')
      .filter(function(c) {return c.clientX > window.innerWidth / 2 })
      .take(10)
      .subscribe(function(c) {console.log(c.clientX, c.clientY) })
  }
}

EDIT:

See the working Plunkr here. If you click on the right half of the preview, the cords are printed in the console. It works online but not on my local machine with the same code...

Upvotes: 1

Views: 121

Answers (3)

Sergey Andreev
Sergey Andreev

Reputation: 1488

Because this Observable need an argument. If it is array, you need Observable< Array< any>> or try Observable< Response>

Upvotes: 2

martin
martin

Reputation: 96889

The fromEvent() method is a static method that needs to be called on Observable class not on an instance:

Observable.fromEvent(document, 'click')

See for more info: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent

So the problem is actually not in the parameter because you shouldn't be using it anyway :).

Upvotes: 3

David
David

Reputation: 3937

Your constructor declares an argument obs to be of type Observable. Observable is a generic type, meaning that it requires a type parameter.

Think about it this way: you want obs to be an Observable "of something", i.e. containing items of type something.

You need to write constructor(private obs: Observable<Something>).

Upvotes: 3

Related Questions